중첩 된 지시문 AngularJs의 뷰 (DOM) 요소를 업데이트하지 않습니다.

Question

중첩 된 지시문을 만들고 HTML 뷰에서 호출하려고했지만 html의 뷰 요소를 업데이트하지 않았습니다.

호출 된 컨트롤러에서 업데이트 된 값을 가져올 수 있지만 뷰 수준에서 업데이트 된 효과를 볼 수 없습니다.

여기 JS

// Code goes here 
"use strict"; 
var myApp=angular.module("myApp",[]); 

myApp.directive("selectDirective", [function() { 
    return { 
     restrict: "E", 
     template: '<select class="form-control input-sm dropdown" data-ng-model="model.args.selectedItem" data-ng-options="item[model.args.displayField] for item in model.args.source" data-ng-change="model.itemChange(model.args.selectedItem)"><option value="">Select Any Item</option></select>', 
     scope: { 
     }, 
     bindToController: { args: "=" }, 
     link: function (scope, element, attrs) { 
      var self = scope.model || {}; 
      var initializeControl = function() { 
       if (self.args == undefined) { 
        self.args = {}; 
       } 
       if (self.args.method == undefined) { 
        self.args.method = {}; 
       } 
       if (self.args.isDisabled == undefined) { 
        self.args.isDisabled = false; 
       } 
       if (self.args.displayField == undefined) { 
        self.args.displayField = ''; 
        //alert('Display Field is blank for dropdown control.') 
       } 
       if (self.args.valueField == undefined) { 
        self.args.valueField = ''; 
        //alert('Value Field is blank for dropdown control.') 
       } 
       if (self.args.source == undefined) { 
        self.args.source = {}; 
       } 
       if (self.args.hide == undefined) { 
        self.args.hide = false; 
       } 
      } 
      var assignMethod = function() { 
       self.args.method = 
        { 
         setEnable: function (args) { 
          self.args.isDisabled = !args; 
         }, 
         setVisible: function (args) { 
          self.args.hide = !args; 
         }, 
         getText: function() { 
          return self.args.selectedText; 
         }, 
         getValue: function() { 
          return self.args.selectedValue; 
         }, 
         setItem: function (item) { 
          if (item != undefined) { 
           var index = self.args.source.indexOf(item); 
           self.args.selectedText = item[self.args.displayField]; 
           self.args.selectedValue = item[self.args.valueField]; 
           self.args.selectedItem = item; 
           self.args.selectedIndex = index; 
          } 

         } 
        } 
      } 
      self.itemChange = function (item) { 

       if (item != undefined) { 
        var index = self.args.source.indexOf(item); 
        self.args.selectedText = item[self.args.displayField]; 
        self.args.selectedValue = item[self.args.valueField]; 
        self.args.selectedItem = item; 
        self.args.selectedIndex = index; 
       } 
      } 

      initializeControl(); 
      assignMethod(); 

     }, 
     controller: function() { }, 
     controllerAs: 'model' 
    } 
}]); 
myApp.directive("stateDirective", [function() { 
    return { 
     restrict: "E", 
     template: '<select-directive args="model.args"></select-directive>', 
     scope: {}, 
     bindToController: { args: "=" }, 
     link: function (scope, element, attrs) { 
      var self = scope.model || {}; 

      var initializeControl = function() { 
       if (self.args == undefined) { 
        self.args = {}; 
       } 
       var sourceList = [{ id: 1, name: "AA", value: "AA" }, 
           { id: 2, name: "AB", value: "AB" }, 
           { id: 3, name: "ABD", value: "ABD" }, 
           { id: 4, name: "ABE", value: "ABE" }, 
           { id: 5, name: "ACT", value: "ACT" }, 
           { id: 6, name: "AE", value: "AE" }]; 
       self.args.source = sourceList; 
       self.args.displayField = 'name'; 
       self.args.valueField = 'value'; 
      }(); 

     }, 
     controller: function() { 

     }, 
     controllerAs: 'model' 
    } 
}]); 
myApp.controller("homeController", ['$interval', function ($interval) { 
    var self = this; 

    var initializeControl = function() { 

     self.state1 = {}; 
     self.state2 = {}; 

     self.ClickMe = function() { 
      debugger; 
      aler(1); 
      self.state2.method.setItem(self.state1.selectedItem); 
     } 

     self.ClickMe2 = function() { 
      debugger; 
      aler(1); 
      var x1 = self.state1; 
      var x2 = self.state2; 
     } 



    }; 
    $interval(function() { 
    }, 500); 

    initializeControl(); 
}]); 

이며 여기 html로이다 : 여기

 <div class="cold-md-12" ng-controller="homeController as model"> 
    <h1>Home Page</h1> 
    <state-directive args="model.state1"></state-directive> 
    <br /> 
    <input type="button" value="ClickMe" data-ng-click="model.ClickMe()" /> 
    <state-directive args="model.state2"></state-directive><br /> 
    <input type="button" value="Submit" data-ng-click="model.ClickMe2()" /> 
</div> 

Fiddle.

N.B : 지시문과 컨트롤러에도 $watch과 $timeout을 사용해 보았지만 제대로 작동하지 않았습니다.

Answer 1

그냥 ng-option에 track by을 추가했다.

난 그냥

item[model.args.displayField] for item in model.args.source track by item[model.args.valueField] 

에

item[model.args.displayField] for item in model.args.source

에서 data-ng-options 값 을 변경하고 완벽하게 작동하고.

Answer 2

scope.model이 초기화되지 않은 경우 연결 기능에서 {}을 self으로 지정합니다. 하지만 실제로 컨트롤러에 배치하지 마십시오. scope.model이 존재한다면, 여러분은 괜찮습니다. 컨트롤러에 모든 것이 바인딩되어 있기 때문에 범위에 바인딩됩니다. 내가 추측하고있는 것은 일어나는 일이다.

내가 너무 대담 할 수도 있지만 컨트롤러 모델의 이름을 지정하면 이 매우입니다. 왜냐하면 개발의 세계 모델과 컨트롤러는 두 가지 매우 다른 것들입니다.

건배, 아론