指令輸入值調用指令多次

Question

我有以下指令，

(function(){ 
    angular.module("pulldownmodule") 

    .controller("pulldownCtrl",['pullDownServices','$scope',"multiselectDefaults","templates",function(pullDownServices,$scope,multiselectDefaults,templates){ 

     //Local variables 
     _this = this; 
     var dropdownData = {}; 
     var currentTemplate = {}; 
     var firstTemplate; 

     //Validation function 
     function validateInput(){ 
      console.log(_this.dropdownid); 
      if (_this.dropdownid) { 
       getPullDownData(_this.dropdownid,_this.filter); 
      } 
      //check if the dropdown ID is present 
     } 

     $scope.$watch('pulldownCtrl.dropdownid',function(newVal){ 
      console.log(_this.dropdownid); 
      if (newVal) { 
       validateInput();  
      };    
     }); 

    }]) 

    .directive('pulldown', [function(){ 
     return { 
      scope: {}, 
      bindToController:{ 
       dropdownid:"=", 
       filter:"=", 
       templatetype:"@" 
      }, 
      controller:'pulldownCtrl', 
      controllerAs:'pulldownCtrl', 
      templateUrl: 'pulldown/html/dropDownDirective.html' 
     }; 
    }]); 
})() 

我打電話指令2次如下

<div pulldown dropdownid="currentID" templatetype="template2" filter="customFilter"></div> 

<div pulldown dropdownid="currentID2" templatetype="template2" filter="customFilter2"></div> 

傳遞在控制器作爲dropdownid的值時改變

$scope.currentID = 1; 
$scope.currentID2 = 5; 

這裏的問題是，如果我只調用指令1次一切正常，但如果我多次調用它，那麼我將$ watch中的_this.dropdownid作爲第二個指令值。不知道我做錯了什麼。

可能我必須使用'new'創建一個新實例。

指令HTML

以下是HTML指令的主要部分，

<select id="searchData" kendo-multi-select="pulldown" k-options="ddoptions" k-rebind="ddoptions" k-on-change="getChangevalue('searchData')"></select> 

我使用的劍道多選

Answer 1

由於@hgoebl指出_this = this;這是一種儘管您在函數範圍內使用全局變量（而不是應用程序級別）變量。

使用var _this = this;

//after assign "_this" is not accessible here 

(function(){ 
    //after assign "_this" is accessible here 
    angular.module("pulldownmodule") 
    .controller(...function(){ 
     _this = this; //use var _this = this; 
     //...others code 
    });  
}(); 

Answer 2

angular.module("pulldownmodule",[]) 

.controller("pulldownCtrl",['$scope',function($scope){ 

    //Local variables 
    _this = this; 
    // Initialize your models here 
    $scope.currentID = '1'; 
    $scope.currentID2 = '3'; 

    var dropdownData = {}; 
    var currentTemplate = {}; 
    var firstTemplate; 

    //Validation function 
    function validateInput(){ 
     console.log(_this.dropdownid); 
     if (_this.dropdownid) { 
      getPullDownData(_this.dropdownid,_this.filter); 
     } 
     //check if the dropdown ID is present 
    } 

    $scope.$watch('currentID', function (newVal) { 
     console.log($scope.currentID); 
     if (newVal) { 
      validateInput();  
     };    
    }); 

    $scope.$watch('currentID2', function (newVal) { 
     console.log($scope.currentID2); 
     if (newVal) { 
      validateInput(); 
     }; 
    }); 

}]) 

.directive('pulldown', [function(){ 
    return { 
     scope: { 
      dropdownid:"=", 
      filter:"=", 
      templatetype:"@" 
     }, 
     template: '<select ng-model="dropdownid"> <option ng-repeat="a in [1,2,3,4,5]" value="{{a}}"> {{a}} </option> </select>', 
     link: function (scope,element, attr) { 
      scope.$watch("dropdownid", function (newVal) { 
       scope.dropdownid; 
      }); 
     } 
    }; 
}]);