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

我按照以下方式调用该指令

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

这里的问题是，如果我只调用一次指令一切正常，但如果我多次调用它，那么我在$ watch中得到_this.dropdownid作为第二个指令值。不确定我做错了什么。

可能我必须使用＆＃39; new＆＃39;。

创建一个新实例

指令HTML

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

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

我正在使用kendo multiselect

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

多次调用指令时指令输入值发生变化

2 个答案: