Question

我有一个指令，它适用于也具有ng-model的复选框在链接功能的指令中，复选框不能获得模型的值如果添加超时（无论多长时间，即使是0）都可以工作。

我的控制和指示：

var myApp = angular.module("myApp",[])
.directive("checkBox", function($timeout){
    return {
        restrict: 'A',
        link: function (scope, element, attrs, ctrl) {
            console.log("Check box is : " + element[0].checked);
            scope.message += "Check box is : " + element[0].checked + " , ";
            $timeout(function(){
                scope.message += "Check box is : " + element[0].checked;    
                console.log("Check box is : " + element[0].checked);
            },0);
        }
    }
});

function myCtrl($scope){
    $scope.checkBoxModel = true;
    $scope.message = "";
}

HTML：

<div ng-app="myApp" ng-controller="myCtrl" >
    <input type="checkbox" ng-model="checkBoxModel" check-box>
        <br/>
        {{message}}
</div>

Fiddel - http://jsfiddle.net/myyjL/

提前致谢。

Answer 1

你可能不应该做你想做的事情，但这是可能的。

这是一个有效的plunkr，没有超时：

http://jsfiddle.net/myyjL/2/

.directive("checkBox", ['$timeout', function($timeout){
    return {
        restrict: 'A',
        replace: false,
        scope: {
            ngModel:'='
        },
        transclude: true,
        link: function (scope, element, attrs, ctrl) {
            scope.$watch('ngModel', function(newValue){
                scope.$parent.message = 'Checkbox value is: ' + newValue;
            });
        }
    }
}])

这种方法的问题在于你的指令知道它之外的东西（如{{message}}变量中所示）。这是一个糟糕的设计，你应该重做那个。另外，在你的小提琴中使用元素[0] .checked，同时你可以轻松使用ng-modal值。但是ng-modal可能不存在。此外，输入可能不是真正的复选框，因此您的方法也会失败。如何解决？我会在一秒钟内给你写一个示范性的傻瓜：

http://plnkr.co/edit/jyY6sQwXmtlGOvpdzETR?p=preview

angular.module('myApp', [])

.directive('box', [function(){
    return {
        restrict: 'E',
        scope: {
            ngModel: '='
        },
        templateUrl: 'box.tpl.html',
        replace: true
    };
}])

.controller('MyController', ['$scope', function MyController($scope){
    $scope.checkboxValue = true;
}]);

我们在这里做的是通过提供模板内的复选框来确保我们的指令始终是一个复选框。你可以做你的指令的样式等。

带有ng-model的复选框的Angularjs指令

1 个答案: