AngularJS : 지시어, 컨트롤러, 템플릿 분리 사이의 적절한 상호 작용

Question

나는 각도 방법을 통해 작업을하고 있으며 현재 지시어의 올바른 사용법을 이해하려고 노력하고 있습니다. 앱의 전반적인 생태계와 관련이 있습니다. 현재 편집 가능한 요소가있는 폼의 기본 로직을 처리하고 폼의 상태를 변경하거나 취소하는 버튼을 취소/저장하려고합니다.

다음은 현재 작동하고있는 작업입니다. 슬림 템플릿과 CoffeeScript를 사용하고 있으므로 일반 HTML 및 JS로 정리하려고합니다. 따라서 앱이 깨지는 문법 오류는이 게시물의 오타로 인해 발생한다고 가정하십시오.

# excerpt of the template 

<div my-form ng-repeat="band in bands"> 
    <div class="band-name"> 
    {{band.name}} 
    </div> 

    <div class="edit-band" ng-click="editBand(band)"> 
    Click to edit 
    </div> 

    <div ng-if="editingBand != band"> 
    {{band.tagline}} 
    </div> 

    <div ng-if="editingBand == band"> 
    <form class="form-horizontal" ng-submit="updateBand(band)"> 
     <input type="text" ng-model="band.tagline" /> 
     <input class="btn btn-default" type="submit" /> 
    </form> 
    </div> 

    <div ng-if="uncommitedChanges"> 
    <button ng-click="saveChanges()">Save</button> 
    <button ng-click="cancelChanges()">Cancel</button 
    </div> 
</div> 


---------------excerpt of controller 

# during init 
$scope.bands = bands; 
$scope.originalBands = angular.copy(bands); 
$scope.uncommittedChanges = false 

$scope.editBand = function(band) { 
    $scope.editingBand = band; 
} 

$scope.updateBand = function(band) { 
    $scope.editingBand = null; 
    $scope.uncommittedChanges = true; 
} 

$scope.cancelChanges = function(){ 
    $scope.bands = angular.copy($scope.originalBands); 
    $scope.uncommittedChanges = false 
} 

$scope.saveChanges = function(){ 
    $scope.uncommittedChanges = true; 
    // bands are sent to the service that performs the update against the API 
} 

다시 말하지만,이 모든 작업이 적절하게 수행되지만 적절하게 수행됩니까? 나는이 논리가 많은 재사용 성이 있기 때문에 지시문으로 분리되어야한다고 생각하지만, 어떻게 시작 해야할지에 대해서는 조금 불명확하다. 그 문제에 관해서는, 나는 직감이 옳다는 것에 대해 긍정적이지 않습니다. 지도 정말 감사하겠습니다.

Answer 1

이렇게 결국 간단하게 대답하기에는 너무 복잡하거나 너무 넓지 않았습니다. 가장 좋은 방법은 아니지만 시작일 수 있습니다. 제안을 환영합니다!

지시문을 담당하는 컨트롤러를 정의 할 수있는 몇 가지 블로그를 읽는 동안 눈치 챘습니다. 이것을 알면 "기능을 컨트롤러에서 지시문으로 어떻게 옮깁니 까?"라는 질문에 대한 해결책입니다. "당신은 당신을 지시자 전용 컨트롤러로 옮깁니다."라고 대답 할 수 있습니다. 템플릿에서

, 나는 다음과 같이 호출 :

<div id="show-bands" class="col-md-8" bands-form bands="bands"></div> 

내 지시어는 여전히 매우 간단하다.

myApp.directive 'bandsForm',() -> 
    return { 
    scope: { 
     bands: '=bands' 
    } 
    templateUrl: 'directives/bands/band_form.html' 
    controller: 'BandFormCtrl' 
    } 

는 I 내가 bands이 지시자에 전달 될 때 호출 지시자를 동일 속성 세트 어떤 모델 즉, scope: { bands: '=bands' }과 범위를 분리 만든다. 이는 Rails ERB 템플릿에서 <%= render 'templates/my_template', bands: @bands %>과 동일합니다.

마지막으로 BandFormCtrl은이 지시문 전용의 새 컨트롤러입니다. 여기에는이 리팩터링 이전에 공유 컨트롤러에 있던 모든 것이 포함됩니다. bands이 정의되고 전달 될 수있는 한 모든 것이 작동합니다.

Answer 2

정확하게 AngularJS에서 작동하는 방법은 다음과 같습니다. 지시어에 코드를 캡슐화하여 재사용 할 수 있는지 확인하십시오. 그러나 나는 여러분을 제외하고 아무도 그 예제의 코드에서 재사용 할 수있는 것을 말할 수 없다고 생각합니다 :) 아마도 ng-repeat 내부에있는 코드를 지시문에 넣고 싶을 수도 있습니다.

P.S. : ng-if은 강력한 지시어이며 ng-show과 작동이 다른 점에 대해 읽어 보시기 바랍니다.