AngularJS-如何在单击指令模板中创建的复选框时调用控制器的功能答案

【问题标题】：AngularJS- How to call controller's function on click of checkbox which is created in directive templateAngularJS-如何在单击指令模板中创建的复选框时调用控制器的功能
【发布时间】：2014-10-28 14:58:31
【问题描述】：

我是 angularJS 的新手。我想使用指令中的模板动态创建复选框。我在单独的文件中创建了控制器和指令。我在指令的模板中创建复选框，并希望在 ng-click 复选框时调用控制器的功能，但我无法这样做。这是我的代码示例。

Controller:
var app=angular.module('abc',[]);
app.controller('DemoCtrl', function($scope) {
$scope.ctrlFn = function(test) {
         alert("hi "+test);
          console.log(test);
      }
});

我参考了https://github.com/iVantage/angular-ivh-treeview 来创建复选框树视图。我在我的示例中包含了所有的 css 和 js 文件。从链接中，我得到了以下 js 文件，该文件在指令中的模板中创建复选框，如下所示：

ivh-treeview.min.js：

angular.module("ivh.treeview",[]),
angular.module("ivh.treeview").directive("ivhTreeviewCheckbox",[function(){
    "use strict";
    return{restrict:"A",
        scope:{node:"=ivhTreeviewCheckbox"},
        require:"^ivhTreeview",
        link:function(a,b,c,d){
            var e=a.node,f=d.opts(),g=f.indeterminateAttribute,h=f.selectedAttribute;
            a.isSelected=e[h],
                a.ctrl=d,
                a.$watch(function(){return e[h]},function(b){a.isSelected=b}),
                a.$watch(function(){return e[g]},function(a){b.find("input").prop("indeterminate",a)})},
        template:['<input type="checkbox"','ng-model="isSelected"','ng-change="ctrl.select(node, isSelected)" />'].join("\n")}
}]);

查看：

<div class="col-sm-8" ng-controller="DemoCtrl as demo">
                    <div ivh-treeview="demo.bag"
                         ivh-treeview-selected-attribute="'isSelected'"
                         ivh-treeview-id-attribute="'uuid'"
                         ivh-treeview-expand-to-depth="0">
                     </div>
</div>

我想在点击指令模板中创建的复选框时调用 ctrlFn()。请提出一种方法来做同样的事情。

提前致谢

【问题讨论】：

有一个小提琴会有所帮助。您也可以尝试在内部 div 中使用 ng-controller。

标签： javascript jquery angularjs checkbox treeview

【解决方案1】：

听起来您正在寻找指令和父 $scope 之间的双向绑定。

// parent controller scope
$scope.person = { name:'coldstar', class:'sexy beast' };

// directive declaration
<div a-person='person'></div>

// directive code
scope: {
    // the = sign is the key. could also be a function instead of object
    innerPerson: "=aPerson"
},
link: function (scope, elm, attr){
    // now this change will be reflect in the parent controller also
    scope.innerPerson.name = "not coldstar anymore";
}

编辑：

如果 isSelected 是 $scope.* 实体，我还注意到“'isSelected'”应该是“isSelected”

【讨论】：