Question

我是角色的新手

我有一个指令和一个控制器。看看这个例子我想要的是在单击文本以及单击外部div时更改复选框值（true / false）文本在控制器中。

HTML

<div ng-app="miniapp">
   <div ng-controller="myController">
       <add-checkbox></add-checkbox>
       <div ng-click="changeCheckbox()">
         Change Check Value
       </div>

   </div>
 </div>

JS

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

app.directive("addCheckbox", function() {
  return {
        "restrict": "E",
        "replace": true,
        "scope": true,
        "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>',
        "link": function($scope, $elem, attrs) {
               $elem.bind("click", function() {
                     $scope.checkboxChecked = !$scope.checkboxChecked;
           })
       } 
   }
})

app.controller("myController", function($scope) {
   $scope.changeCheckbox = function() {
     $scope.checkboxChecked = !$scope.checkboxChecked;
   }
})

Answer 1

这是因为您的复选框位于指令模板中，而您的$scope.changeCheckbox()功能位于控制器中。要更改其值，您必须更改指令的变量$scope.checkboxChecked，为此，您可以使用$rootScope.$broadcast();

试试此代码

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

app.directive("addCheckbox", function() {
      return {
            "restrict": "E",
            "replace": true,
            "scope": true,
            "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>',
            "link": function($scope, $elem, attrs) {
                   $elem.bind("click", function() {
                         $scope.checkboxChecked = !$scope.checkboxChecked;
                   })

                   $scope.$on("changeCheckbox", function(event, args) {
                       $scope.checkboxChecked = !$scope.checkboxChecked;
                   })
            } 
      }
})

app.controller("myController", function($scope, $rootScope) {
    $scope.changeCheckbox = function() {
        $scope.checkboxChecked = !$scope.checkboxChecked;
        $rootScope.$broadcast('changeCheckbox', {});

    }
})

这是你的更新小提琴 Fiddle Demo

Answer 2

在控制器中创建一个对象并将其与指令绑定，它将起作用

<script>var app = angular.module('miniapp', []);
var app = angular.module('miniapp', []);

app.directive("addCheckbox", function() {
  return {
        "restrict": "E",
        "replace": true,
        "scope": true,
        "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked.check"></div><div>{{!!checkboxChecked.check}}</div></div>',
        "link": function($scope, $elem, attrs) {
               $elem.bind("click", function() {
                     $scope.checkboxChecked.check = ! $scope.checkboxChecked.check;
           })
    } 
}
})

app.controller("myController", function($scope) {
$scope.checkboxChecked={};
$scope.checkboxChecked.check=false;
$scope.changeCheckbox = function() {
    $scope.checkboxChecked.check = !$scope.checkboxChecked.check;
}
})

 <div ng-app="miniapp">
<div ng-controller="myController">
<add-checkbox></add-checkbox>
<div ng-click="changeCheckbox()">
      Change Check Value
</div>

 $scope.checkboxChecked.controllerFunction(){
  }

Answer 3

您需要正确使用指令范围绑定。

HTML：

<add-checkbox checkbox-value="checkboxChecked"></add-checkbox>

指令：

app.directive("addCheckbox", function() {
      return {
            "restrict": "E",
            "replace": true,
            "scope": {
            "value": "=checkboxValue"
        },
            "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="value"></div>{{!!value}}</div>'
    }
})

检查更新的fiddle。

您的代码有什么问题？您可以使用$elem.bind("click"将click绑定到all指令。这是错误的，因为ng-model会将复选框值绑定到您的范围变量。您无需绑定任何事件来设置任何变量。

指令和控制器中的双向绑定

3 个答案: