クリック角の異なる指示を表示する方法JS

メニューがヘッダーバーからクリックされると、左のナビゲーションメニューを表示しようとしています。ヘッダーバー用とメニュー用の2つのディレクティブを作成しました。しかし、ヘッダーバーのメニューボタンをクリックすると、左のナビゲーションメニューが表示されます。現在は動作していません。クリック角の異なる指示を表示する方法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"; 
      } 
     } 
    } 

})();

出典

2017-02-21 M-S

問題がrequire: '^header'ある - それは「ヘッダ」コントローラを見つけることができません。このコードを削除すると、コードが機能します。また、$ 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="[email protected]" 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>

出典

2017-02-21 01:53:53

は –

はどうもありがとうございましたので、それを削除している必要はありません... –

クリック角の異なる指示を表示する方法JS

答えて

関連する問題