0

I'va가 Dropdown 지시문을 만들었습니다. 지시문에 매개 변수를 전달할 때 메서드를 할당하려고 했으므로 컨트롤러에서이 메서드를 호출합니다. 하지만 첫 번째로드에서 나는 컨트롤러에서 assign 메소드를 얻지 못하고 있지만 두 번째로드 (즉, 드롭 다운 변경 이벤트)에 할당 할 때 제대로 작동합니다.지시어 매개 변수가 AngularJs에서 첫 번째로드시 초기화되지 않음

처음로드 한 후 호출 컨트롤러에서 지시문을 처음로드 할 때 어떻게 메서드를 얻을 수 있습니까? 방법을 지정한 경우 :

<div class="cold-md-12" ng-controller="homeController as model"> 
    <h1>Home Page</h1> 
<select-directive args="model.argsParam"></select-directive> 
    <input type="button" value="Click" ng-click="model.clickMe()" /> 
</div> 

시나리오 : 내가 지시어를 사용

"use strict"; 
myApp.controller("homeController", [function() { 
    var self = this; 

    var initializeControl = function() { 

     var myList = [{ id: 1, name: 'List1', value: 'List1' }, 
             { id: 2, name: 'List2', value: 'List2' }]; 
     self.argsParam = { 
      displayField: 'name', 
      valueField: "value", 
      source: myList, 
      selectecText: '', 
      selectecValue: '' 
     }; 
     self.clickMe = function() { 
      debugger; 
      var item = { id: 2, name: 'List2', value: 'List2' }; 
      self.argsParam.method.setItem(item); 
     } 
    }; 
    initializeControl(); 
}]); 

보기 : 여기

"use strict"; 
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: "=" }, 
     controller: function() { 
      var self = this; 
      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; 
       } 
      } 
      //here i'm assigning the methods in passing parameter 
      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) { 
          debugger; 
          if (item != undefined) { 
           var index = self.args.source.indexOf(item); 
           self.args.selectecText = item[self.args.displayField]; 
           self.args.selectecValue = item[self.args.valueField]; 
           self.args.selectedItem = item; 
           self.args.selectedIndex = index; 
          } 

         } 
        } 
      } 
      self.itemChange = function (item) { 
       debugger; 
       if (item != undefined) { 
        var index = self.args.source.indexOf(item); 
        self.args.selectecText = item[self.args.displayField]; 
        self.args.selectecValue = item[self.args.valueField]; 
        self.args.selectedItem = item; 
        self.args.selectedIndex = index; 
       } 
      } 
      initializeControl(); 
      assignMethod(); 
     }, 
     controllerAs: 'model' 
    } 
}]); 

가 호출 컨트롤러 코드입니다 : 여기

는 지침입니다 드롭 다운 변경 이벤트에 대한 두 번째 시간 지시문 내부 호출 이 메소드는 param을 전달할 때 사용됩니다.

그래서
self.itemChange = function (item) { 
       debugger; 
       if (item != undefined) { 
        var index = self.args.source.indexOf(item); 
        self.args.selectecText = item[self.args.displayField]; 
        self.args.selectecValue = item[self.args.valueField]; 
        self.args.selectedItem = item; 
        self.args.selectedIndex = index; 

        // here i'm assigning these method on change event then it's working fine after changing the value otherwise no success 
        assignMethod(); 
       } 
      } 

, 나는이 방법이 지침의 먼저 부하에 통과 매개 변수에 지정받을 수 있습니까?

답변

0
내가 지침에 기능을 연결하는 컨트롤러의 내용을 이동 한

및 그것은 잘 작동,하지만 난 여전히 예상대로 내 앞의 코드 가 작동하지 어떻게 어떤 생각을하지 않았다.

지침 번호 :

'use strict'; 
var testApp = angular.module('TestApp', []); 
testApp.directive('sampleDirective', ['$http', function() { 
    return { 
     restrict: "E", 
     scope: {}, 
     bindToController: { args: '=' }, 
     template: '<div class="row">' + 
        '<select class="form-control"' + 
        '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>' + 
        '</div>', 
     link: function (scope, element, attrs) { 
      var self = scope.model; 
      debugger; 
      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) { 
          var index = self.args.source.indexOf(item); 
          self.args.selectecText = item[self.args.displayField]; 
          self.args.selectecValue = 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.selectecText = item[self.args.displayField]; 
        self.args.selectecValue = item[self.args.valueField]; 
        self.args.selectedItem = item; 
        self.args.selectedIndex = index; 
       } 
      } 

      initializeControl(); 
      assignMethod(); 
     }, 
     controller: function() { 
     }, 
     controllerAs: 'model' 
    } 
}]); 
관련 문제