Question

的插件

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" />

或者你可以绑定模型

像这样

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

检查plunkr

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

绑定Angularjs in Directive中的复选框

1 个答案: