如何从指令
问题描述：
呼叫控制器范围的功能是在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 + "/";
}
}]);
答
您应该使用bindToController财产到您的指令，而不是孤立的范围我的控制器功能，那么你可以调用控制器功能在控制器和指令之间有一个引用范围。
编辑：
检查这个小提琴http://jsfiddle.net/nvdf83ox/ 在那里，我们有两个控制器：
-
HomeController拥有你的主页的所有HTML视图中的范围。您可以通过vmHome范围名称访问他的功能。 -
NavigationController它在我们的指令视图内有作用域，它的名称为vmNav来访问作用域。
使用bindToController与角> 1.3
答
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再次检查上面的链接。
工作你检查控制台？ – Jigar7521
@JigarPrajapati是的，我检查了我的控制台。没有错误。 – navnit
有一个错字：你不需要在附近做大括号： {{item1.varDisplayName}} 只需在你的变量中移除大括号。 – Jigar7521