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

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>

菲德尔-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}} 变量中）。这是一个糟糕的设计，你应该重新设计它。此外，在您的小提琴中，您使用 element[0].checked，而您可以轻松使用 ng-modal 值。但是 ng-modal 可能不存在。此外，输入可能不是真正的复选框，因此您的方法也失败了。如何解决？我会在几秒钟内给你写一个示范性的 plunkr：

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

我们在这里所做的是通过在模板中提供复选框来确保我们的指令始终是一个复选框。您可以对指令进行样式设置等。