如何在单击角JS上显示其他指令

一旦从标头栏中单击菜单后，请尝试显示左导航菜单。我创建了两个指令，一个用于标头栏，一个用于菜单。但是，当我单击"标头栏"按钮时，应显示左导航菜单。但是目前它不起作用。

这是我尝试的：

(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";
            }
        }
    }
})();

问题是require: '^header'-找不到'标头'控制器。如果您删除此，则您的代码有效。另外，不需要$编译。

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

相关内容

最新更新

热门标签：