如何在点击角度JS上显示其他指令
[英]How to show a different directive on click angular JS
问题描述
Am trying to show the left nav menu, once the menu is clicked from the header bar. 
从标题栏单击菜单后，我试图显示左侧导航菜单。 I have created two directives, one for header bar and one for menu. 我创建了两个指令，一个用于标题栏，一个用于菜单。 But when i clicked on the header bar menu button, the left nav menu should display. 但是，当我单击标题栏菜单按钮时，应显示左侧导航菜单。 but currently it's not working. 但目前无法正常运作。
this is what i tried: 这是我尝试的：
(function() {
'use strict';
angular.module('test.header.module', []);
angular.module('test.header.module')
.directive('header',header)
.directive('menu', menu);
function header($compile){
return {
restrict: 'E',
template: '<header> <button ng-click="showMenu()"> Test Header </button> </header>'+
'<menu ng-if="menuS"></menu>',
link: function(scope, element, attr){
scope.showMenu = function(){
scope.menuS = true;
}
}
}
}
header.$inject = ["$compile"];
function menu(){
return{
restrict:'EA',
require: '^header',
template : '<h1 id="test">{{test}}</h1>',
link : function(scope, element, attr){
scope.test = "Test Left Nav";
}
}
}
})();
1 个解决方案
解决方案1
0 已采纳 2017-02-21 01:53:53
The problem is the require: '^header' - it can't find the 'header' controller. 问题是require: '^header'它找不到'header'控制器。 If you remove this your code works. 如果删除此代码，则代码有效。 Also, $compile is not needed. 另外，不需要$ compile。
(function() { 'use strict'; angular.module('test.header.module', []); angular.module('test.header.module') .directive('header',header) .directive('menu', menu) function header(){ return { restrict: 'E', template: '<div> <button ng-click="showMenu()"> Test Header </button> </div>'+ '<menu ng-if="menuS"></menu>', link: function(scope, element, attr){ scope.showMenu = function(){ scope.menuS = true; } } } } function menu(){ return{ restrict:'EA', template : '<h1 id="test">{{test}}</h1>', link : function(scope, element, attr){ scope.test = "Test Left Nav"; } } } })();
<!DOCTYPE html> <html ng-app="test.header.module"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js" data-semver="1.5.10"></script> <script src="app.js"></script> </head> <body> <header></header> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.