如何從指令

呼叫控制器範圍的功能是在HTML頁面如何從指令

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

指令聲明在上述聲明中的菜單列表包含從服務器datasoruce。下面

是我在上面的模板。我已MenuClick事件定位標記菜單

<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>

模板。這是在我的控制器definde。但當我點擊菜單上它不叫

我在我的角應用程序follwing指令。

此指令創建動態菜單。

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 + "/"; 
     } 
}]);

來源

2016-10-17 navnit

工作你檢查控制檯？ – Jigar7521

@JigarPrajapati是的，我檢查了我的控制檯。沒有錯誤。 – navnit

有一個錯字：你不需要在附近做大括號： {{item1.varDisplayName}} 只需在你的變量中移除大括號。 – Jigar7521

您應該使用bindToController財產到您的指令，而不是孤立的範圍我的控制器功能，那麼你可以調用控制器功能在控制器和指令之間有一個引用範圍。

編輯：

檢查這個小提琴http://jsfiddle.net/nvdf83ox/ 在那裏，我們有兩個控制器：

HomeController擁有你的主頁的所有HTML視圖中的範圍。您可以通過vmHome範圍名稱訪問他的功能。
NavigationController它在我們的指令視圖內有作用域，它的名稱爲vmNav來訪問作用域。

使用bindToController與角> 1.3

來源

2016-10-17 08:48:08 ivanros92

你可以請舉一些例子或參考，我可以找到怎麼做？謝謝 – navnit

看看這個關於它的託德格言教程：https：//toddmotto.com/no-scope-soup-bind-to-controller-angularjs/#solution，如果你可以附上一個小提琴我可以幫助你更多。 – ivanros92

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

這是你如何做到這一點的角1.3 在指令中，使用controllerAs語法，設置bindToController：真。設置時，組件的屬性綁定到控制器而不是範圍。參考： http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html。

另外在另一個答案中提到的Todd's angular styleguide。

 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'; 
     });

這裏沒有$範圍。該指令使用值名稱，並調用sayHello的使用VM（這）

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

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

這會變得更好用角1.4再次檢查上面的鏈接。

鏈接plnkr http://plnkr.co/edit/hdOrtfYrt83U5kxbpUFi?p=preview

來源

2016-10-17 09:43:28 Mahesh

回答

相關問題