angularjs - angular.js 指令从 transclude 吞下事件

Question

我创建了一个指令，该指令使用 ngTransclude 创建围绕某些内容的 div 包装器。看这个非常简单的例子：http: //jsfiddle.net/DHzrr/1/

如果您从 HTML 中删除 group 元素

<div ng-controller="TodoCtrl">
  <form ng-submit="addTodo()">
    <input type="checkbox" ng-model="checked">
  </form>
  <div ng-hide="checked">NOT CHECKED</div>
</div>

“ng-hide”监听器正在工作。所以我的组指令吞下事件发出或隔离 $scope。我怎样才能使这项工作？

我认为只有在指令定义对象中使用 scope:true 属性时才会创建新的范围。

Answer 1

transclude: true创建一个从父 (TodoCtrl) 范围原型继承的新子范围。您可以通过以下三种方式之一解决问题：

1. （推荐）绑定到父范围上定义的对象属性：ng-model="obj.checked"并在您的控制器中：$scope.obj = {checked: false}
   小提琴
2. 采用ng-model="$parent.checked"
3. 使用函数更新父模型上的模型：添加ng-change="toggle()"到您的input，然后在控制器上定义一个函数：$scope.toggle = function() { $scope.checked = !$scope.checked }

另请参阅AngularJS中范围原型/原型继承的细微差别是什么？，部分指令项目“4。transclude: true”