Question

我有两个嵌套指令用于在Angular中构建树视图：

家长指示：

myApp.directive('nodes', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            nodes: '='
        },
        template: "<ul><node ng-repeat='node in nodes' node='node'></node></ul>"

    }
});

儿童指令：

myApp.directive('node', function($compile) {
        return {
            restrict: "E",
            replace: true,
            scope: {
                node: '='
            },
            template: "<li>{{node.ObjectName}}</li>",
            link: function(scope, element, attrs) {
                if (angular.isArray(scope.node.Children)) {

                    element.append("<nodes nodes='node.Children'></nodes>");

                    $compile('<nodes nodes="node.Children"></nodes>')(scope, function(cloned, scope) {

                        element.append(cloned);
                    });
                }
            }
        }
    });

控制器：

function myController($scope, DataService) {
        $scope.init = function() {

            DataService.getData(0, 0).then(function(data) {
                $scope.treeNodes = $.parseJSON(data.d);
            });
        }

        $scope.focusNode = function(prmNode) {
            console.log(prmNode);
        }

    }

HTML：

<div ng-app="testTree" ng-controller="myController">
        <div ng-init="init()">
            <nodes nodes='treeNodes'></nodes>
        </div>
    </div>

我的问题是如何在<li>上实现点击，它会调用控制器中的“focusNode”功能？

Answer 1

您可以通过属性传递函数。

<强>的Javascript

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

myApp.directive('nodes', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            nodes: '=',
            clickFn: '&'
        },
        template: "<ul><node ng-repeat='node in nodes' node='node' click-fn='clickFn()'></node></ul>"
    }
});


myApp.directive('node', function($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
            node: '=',
            clickFn: '&'
        },
        template: "<li><span ng-click='clickFn()(node)'>{{node.ObjectName}}</span></li>",
        link: function(scope, element, attrs) {
            if (angular.isArray(scope.node.Children)) {

                element.append("<nodes nodes='node.Children' click-fn='clickFn()'></nodes>");

                $compile('<nodes nodes="node.Children" click-fn="clickFn()"></nodes>')(scope, function(cloned, scope) {

                    element.append(cloned);
                });
            }
        }
    }
});

function myController($scope) {
  $scope.focusNode = function(prmNode) {
      console.log(prmNode);
  }

  $scope.root = {
    ObjectName: 'Root',
    Children:[{
      ObjectName: 'A',
      Children: [{
        ObjectName: 'B'
      }, {
        ObjectName: 'C'
      }]
    }]
  };
}

<强> HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app='myApp' ng-controller="myController">
    <node node="root" click-fn="focusNode"></node>
  </body>

</html>

Answer 2

因为我得到50个代表才能发表评论：（...

我只想补充一点，我在尝试W.L.Jared上面分享的plunkr时也遇到了错误。为了解决这个错误，我将控制器从全局函数更改为：

angular.module('myApp').controller('myController', function($scope){...})

错误消失了。

虽然答案很好:)正是我想要的。

从嵌套指令调用控制器中的函数

2 个答案: