指令輸入值調用指令多次

我有以下指令，指令輸入值調用指令多次

(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>

我使用的劍道多選

來源

2015-10-19 Gaurav_soni

能否請您提供您的指令HTML也？什麼是'_this.dropdownid'？你在哪裏設定價值？ –

更新問題並添加了部分html，_this.dropdownid是在調用指令時通過bindToController傳遞給指令的屬性。 –

我更喜歡使用'link'函數來執行你的指令邏輯，包括'$ watch（）'。因爲，爲你的指令分開'範圍/控制器'。 –

由於@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 
    });  
}();

來源

2015-10-19 06:25:37 Reza

-1

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; 
      }); 
     } 
    }; 
}]);

來源

2015-10-19 06:22:53

指令輸入值調用指令多次

回答

相關問題