지시자에서 컨트롤러 범위 값을 변경하십시오. AngularJS

Question

필자는 목록 그리드에 입력 상자가 있고 단일 지시문을 가지고 있는데, 이제 입력 값이 무엇인지이 지시문에 값을 보내려고합니다. 이 점은 잘 작동하지만, 지시어 입력 상자에서 값을 변경하려고 할 때 지시문 집합에 대한 값이 설정된 목록 격자 입력 상자가 업데이트되지 않습니다.

여기는 작동하는 plnkr입니다. 제가 잘못하고있는 것을 알려주십시오. -

http://plnkr.co/edit/DZdN4itTNccVsuBEJahr?p=preview

내 controller & directive 코드가 같은입니다

var myApp = angular.module('myApp', []); 

myApp.controller('mainCtrl', function(){ 
    var vm = this; 

    vm.fordirective = ''; 

    vm.list = [ 
    {id: "1", name: 'Test 1', age: 35}, 
    {id: "2", name: 'Test 2', age: 36}, 
    {id: "3", name: 'Test 3', age: 37}, 
    {id: "4", name: 'Test 4', age: 38}, 
    ]; 
}) 

myApp.directive('testdir', function(){ 
    return { 
    restrict: 'EA', 
    scope: { 
     directivevalue: "=" 
    }, 
    templateUrl: 'dirtemplate.html', 
    link: function(scope, elem, attrs) { 

    } 
    }; 
}) 

Answer 1

당신은 item에 객체 참조로 vm.fordirective을 설정할 수 있습니다 :

다음 testdir은 태어나 셨 것 d item에서 모델 값으로 사용할 필드를 어떻게 든 알 수 있습니다. 예를 들어, 도우미 속성을 사용하자 :

<testdir directivevalue="vm.fordirective" field="age">Loading..</testdir> 

을 마지막으로 지시 템플릿에 당신은 directivevalue[field]에 결합해야합니다

<input type="text" ng-model="directivevalue[field]" /> 

데모 : http://plnkr.co/edit/jWKwDJvYOutcLihi7UyC?p=preview

Answer 2

확인이 작업 plnkr -

을

http://plnkr.co/edit/DZdN4itTNccVsuBEJahr?p=preview

,210

지침 코드 -

myApp.directive('testdir', function(){ 
    return { 
    restrict: 'EA', 
    scope: { 
     directivevalue: "=", 
     index: "=" 
    }, 
    templateUrl: 'dirtemplate.html', 
    link: function(scope, elem, attrs) { 

     scope.setParentValue = function(directivevalue){ 
     scope.$parent.vm.list[scope.index].age = directivevalue; 
     }; 
    } 
    }; 
}) 

및 그리드 목록 입력에

, 지시어 값 변경을 추적 할 수 ng-change를 추가 -

대신 좋은 방법이 아닙니다로 ($ 부모를 사용

<input ng-model="item.age" ng-click="vm.fordirective = item.age; vm.index = $index" ng-change="vm.fordirective = item.age; vm.index = $index" />

Answer 3

) 왜냐하면 angle은 양방향 데이터 바인딩을 매우 원활하게 처리하기 때문입니다.

이렇게하려면 전체 항목을 지시어 범위와 바인딩 할 수 있습니다.

확인 작업 plunkr :

https://embed.plnkr.co/LyE0G0APhwC4nco1KvOw/

지침 코드 :

scope.setParentValue = function(directivevalue){ scope.directivevalue = directivevalue; };