Question

我正在研究angularjs指令，我做了一个JsBin，这里我使用两个数组，每个数组选择存储在两个不同的变量名temp1和temp2，问题是当我选择一个数组时另一个值变为空数组，反之亦然。

HTML就是这个

<div ng-controller="ctrl">
<script type="text/ng-template" id="partials/checkbox.html">
  <div ng-repeat="obj in data">
  <input on-check type="checkbox" ng-model="checked" value="{{obj}}" click-checkbox="checkstatus(checked,obj)" checked-me="checked" />{{obj}}</div>

</script>
<check-boxes get-type="data"></check-boxes>
<check-boxes get-type="bestnights"></check-boxes>
</div></div>

Javascript代码

var app = angular.module('myApp', []);

app.controller('ctrl', function($scope) {
var data = [];
var bestnights = [];
var daysArray = [];
var getType;
var temp1, temp2;

$scope.$on($scope.getType, function() {
    getType = $scope.getType;
    if (getType == 'data') {
        $scope.data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        temp1 = data;
        daysArray = data;
    }
    if (getType == 'bestnights') {
        $scope.data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
        temp2 = bestnights;
        daysArray = bestnights;
    }
});

$scope.checkstatus = function(checked, obj) {
    var index = daysArray.indexOf(obj);
    if (checked) {
        if (index === -1) {
            daysArray.push(obj);
        }
    }
    if (!checked) {
        daysArray.splice(index, 1);
    }
    var str = daysArray.toString();
    console.log(temp1);
    console.log(temp2);
    };
});

app.directive('checkBoxes', function() {
    return {
        restrict: "EA",
        scope: {
            getType: "@"
        },
        controller: "ctrl",
        templateUrl: "partials/checkbox.html",
        link: function(scope, ele, attrs, dctrl) {
            ele.bind('click', function() {
                //console.log(scope.getType);
                scope.$emit(scope.getType);
             });
            var defaultFunction = function() {
                scope.$emit(scope.getType);
            }();
        }
    };
});

app.directive('onCheck', function() {
    return {
        restrict: "A",
        scope: {
            clickCheckbox: "&",
            value: "@",
            checkedMe: "="
         },
        link: function(scope, ele, attrs) {
            ele.bind('click', function() {
                scope.clickCheckbox(scope.checkedMe, scope.value);
            });
        }
    };
});

Answer 1

我认为你的一个变量总是为null的原因是因为范围：一个指令有自己的范围。

这意味着：复选框数据将temp1和temp2作为变量。 Checkbox bestnights也将temp1和temp2作为变量。但是不一样：data.temp1！= bestnights.temp1。

要查找指令的值，请执行以下操作。在html中：

<div ng-controller="test">
<script type="text/ng-template" id="partials/checkbox.html">
<div ng-repeat="obj in data">
<input on-check type="checkbox" ng-model="checked" value="{{obj}}" 
     click-checkbox="checkstatus(checked,obj)" checked-me="checked" />{{obj}}    
</div>   
</script>
<check-boxes get-type="data" values="days"></check-boxes>
<check-boxes get-type="bestnights" values="months"></check-boxes>
<input type="button" ng-click="showValues()" value="Show values" /> 
</div>

在js：

var app = angular.module('myApp', []);
app.controller('test', function($scope){

$scope.days = [];
$scope.months = [];

$scope.showValues = function(){
    console.log('Values:');
    console.log($scope.days);
    console.log($scope.months);
};

});

app.controller('ctrl', function($scope) {

$scope.$on($scope.getType, function() {
    if ($scope.getType == 'data') {
        $scope.data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

    }
    if ($scope.getType == 'bestnights') {
        $scope.data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];

    }
});

$scope.checkstatus = function(checked, obj) {
    var index = $scope.values.indexOf(obj);
    if (checked) {
        if (index === -1) {
            $scope.values.push(obj);
        }
    }
    if (!checked) {
        $scope.values.splice(index, 1);
    }
};

});

app.directive('checkBoxes', function() {
return {
    restrict: "EA",
    scope: {
        getType: "@",
        values: "="
    },
    controller: "ctrl",
    templateUrl: "partials/checkbox.html",
    link: function(scope, ele, attrs, dctrl) {
        ele.bind('click', function() {
            scope.$emit(scope.getType);
        });
        var defaultFunction = function() {
            scope.$emit(scope.getType);
        }();
    }
};
});

app.directive('onCheck', function() {
return {
    restrict: "A",
    scope: {
        clickCheckbox: "&",
        value: "@",
        checkedMe: "="
    },
    link: function(scope, ele, attrs) {
        ele.bind('click', function() {
            scope.clickCheckbox(scope.checkedMe, scope.value);
        });
    }
};
});

我认为最好将控制器与您的页面和控制器与指令分开。在我的例子中，我为页面创建了一个名为“test”的控制器。我还为你的指令添加了一个新的参数，它将包含值。最后，对于该示例，我添加了一个按钮来打印值。

指令变量覆盖

1 个答案: