Question

下面是html页面中的指令声明

<navigation menu="MenuList"></navigation>

在上面的声明中，MenuList包含来自服务器的datasoruce。

下面是我的菜单模板

<ul id="accordion" class="sm sm-vertical sm-blue sid_button">
    <li style="padding: 4px 3px 6px 4px;" ng-repeat="item in menu">
        <a class="has-submenu" href="#" id="">
            <span class="field_work_icon"></span>
            <div class="li_title pr_title" style="line-height: 37px;">{{item.varDisplayName}}</div>
            <div class="clearfix"></div>
        </a>
        <ul class="left4 ulwidth211">
            <li ng-repeat="item1 in item.submenu">
                <a href="#" ng-click="MenuClick('{{item1.varDashboardID}}','{{item1.varDisplayName}}')\">{{item1.varDisplayName}}</a>
            </li>
        </ul>
    </li>
</ul>

在上面的模板中，我已将MenuClick事件附加到锚标记。这是我的控制器中的定义。但当我点击菜单时，它不会被称为

我的角度应用程序中有以下指令。

此指令创建动态菜单。

app.directive("navigation", ['$compile', '$rootScope', function ($compile,  $rootScope) {
       return {
           restrict: 'E',
           replace: true,
           scope: {
               menu: '='
           },
           templateUrl: "template.html",
           compile: function (el) {
               var contents = el.contents().remove();
               return function (scope, el) {
                   $compile(contents)(scope, function (clone) {
                       el.append(clone);
                   });
               };
           }
       };
   }])

在此指令的帮助下，我的菜单按原样创建。

但有一点不起作用是点击功能

下面是我的控制器功能，没有调用

app.controller('HomeController', ['$scope', 'Applicationservice', 'WebApiBaseUri', 'ngDialog', '$rootScope', '$sce', '$timeout', 'AppURL', 'AuthenticationService', function ($scope, Applicationservice, WebApiBaseUri, ngDialog, $rootScope, $sce, $timeout, AppURL, AuthenticationService) {
$scope.MenuClick = function (dashBoardID, baseUrl) {
        if (dashBoardID != "") {
            window.location.href = Applicationservice.BaseURL() + "/Menu/Report/";
            sessionStorage.setItem("DashboardID", dashBoardID);
        } else {
            window.location.href = Applicationservice.BaseURL() + "/Menu/" + baseUrl + "/";
        }
}]);

Answer 1

您应该在您的指令中使用bindToController属性而不是隔离范围，然后您可以调用控制器函数，在控制器和指令之间具有引用范围。

修改

检查这个小提琴http://jsfiddle.net/nvdf83ox/ 我们有两个控制器：

HomeController，其范围在您主页的所有html视图中。您可以通过vmHome范围名称访问其功能。

NavigationController，其范围在我们的指令视图中，并且它被称为vmNav以访问范围。

将bindToController与Angular＆gt;一起使用1.3

Answer 2

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

这是你在Angular 1.3中的表现在Directive中，使用controllerAs语法，设置bindToController：true。设置后，组件的属性将绑定到控制器而不是范围。参考： http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

另一个答案中提到了Todd的角度风格指南。

        app.directive('hello', function(){
          return {
            controller: 'HelloCtrl',
            controllerAs: 'ctrl',
            bindToController: true,
            restrict: 'E',
            replace: true,
            scope: {
               name: '='  
            },
            template: '<div><a href="#" ng-click="ctrl.sayHello()">{{ctrl.name}}</a></div>',
          };
        })

        app.controller('MainCtrl', function($scope) {
          $scope.name = 'World';
        });

这里没有$ scope。该指令使用值名称并使用vm（this）
调用sayHello

        app.controller('HelloCtrl', function(){

            var vm = this;
            vm.name = 'hello world123';
            vm.sayHello = function(){
              console.log('hello world !!!');
            }
        });

使用Angular 1.4再次检查上面的链接会更好。

链接到工作的plnkr   http://plnkr.co/edit/hdOrtfYrt83U5kxbpUFi?p=preview

如何从指令

2 个答案: