如何在具有隔离范围的指令中访问控制器功能？答案

【问题标题】：How to access a controller function in directives with isolated scope?如何在具有隔离范围的指令中访问控制器功能？
【发布时间】：2014-05-27 20:12:30
【问题描述】：

我的控制器名称中有一个函数 enableEditor，如果我从直接 HTML 调用该函数，即（添加），它就可以工作。但是，如果我为通过指令创建的元素调用函数，即（编辑）不起作用。如果有任何想法，请查看我的代码并建议我。

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example53-production</title>
  <script src="js/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
  <div user-name=""></div>
  <div>
  <a href="#" ng-click="enableEditor()">add</a>
  </div>
<script>

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

 myApp.controller('MainCtrl', ['$scope','$filter', function ($scope,$filter) {
    $scope.enableEditor = function() {
        alert("123");
    };  
}]);
myApp.directive("userName", function() {
    return {
            restrict: "A",
            scope: {
                value: "=userName"
            },
            template: '<div class="click-to-edit">' +
            '<a href="#" ng-click="enableEditor()">Edit</a>' +
            '</div>'
        };
});
</script>
</body>
</html>

【问题讨论】：

标签： angularjs

【解决方案1】：

由于您有一个独立的范围，该函数属于指令的范围而不是您的控制器。尝试在你的指令范围内使用&，如下所示：

<body ng-controller="MainCtrl">
  <div user-name="" callme="enableEditor()"></div>
  <div>
  <a href="#" ng-click="enableEditor()">add</a>
  </div>
<script>

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

 myApp.controller('MainCtrl', ['$scope','$filter', function ($scope,$filter) {
    $scope.enableEditor = function() {
        alert("123");
    };  
}]);
myApp.directive("userName", function() {
    return {
            restrict: "A",
            scope: {
                value: "=userName",
                callme:"&"
            },
            template: '<div class="click-to-edit">' +
            '<a href="#" ng-click="callme()">Edit</a>' +
            '</div>'
        };
});

属性callme="enableEditor()"用于将方法传递给作用域指令，指令作用域使用&表示它是方法callme:"&"。另一个例子：

method2="someMethod()"点赞

scope: {
      value: "=userName",
      callme:"&",    
      method2:"&"
},template: '<div class="click-to-edit">' + '<a href="#" ng-click="callme()">Edit</a>' + '<a href="#" ng-click="Method2()">Save</a>' + '</div>'

【讨论】：

您好，感谢您的快速回复。如果在模板中创建一个函数，它对我有用。如果我需要在模板上创建 2 个函数链接，那么我需要如何调用它。模板：'
' + '编辑' + '保存' + '
'
@user3621148 我添加了示例。希望这将解释它。如果对您有帮助，请不要忘记将其标记为您的答案。