綁定在Angularjs複選框在指令

Question

我在http://plnkr.co/PF7cRQE4n5lYube8oa3t

的templateUrl點普拉克用下面的代碼來control.html。

hello from Directive 
<br />{{message}} 
<br /> 
<input type="checkbox" {{checkedstatus}} /> 
<br />Value of Checked Status = {{checkedstatus}} 

我的控制器和指令如下...

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}) 
    .directive('myDir', function() { 
    var linkFunction = function(scope, element, attributes){ 
     scope.message = "The check box should be checked... no?"; 
     scope.checkedstatus = "checked"; 
    } 

    return { 
     restrict: 'E', 
     templateUrl: "control.html", 
     link: linkFunction, 
     scope: {} 
    }; 
    }) 

我的index.html文件是直線前進，並使用該指令......

<my-dir></my-dir> 

我是假設如果checkedstatus設置爲「checked」，我會看到在UI中選中的複選框。但它不會以這種方式發生，並且仍然沒有被檢查。我的目標是將此複選框用作切換按鈕來查看或隱藏我的視圖的某些元素。

Answer 1

可以使用ng-checked

scope.checkbox={ 
    checkedstatus:true 
}; 

<input type="checkbox" ng-checked="checkbox.checkedstatus" /> 

或者您也可以plunkr

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

0綁定模型

這樣

<input type="checkbox" ng-model="checkbox.checkedstatus" /> 

檢查