角1.5コンポーネント例

1.5より前の角度を使用してかなり経験しましたが、現在1.5コンポーネントに基づいてWebアプリケーションを開発し始めています。多くのトラブルシューティングの後、基本的なテンプレートが動作しないように見えます。次の単純なメニューコンポーネントで何が間違っているのか教えてください。私は提供される可能性のある任意の支援に感謝します。ここで角1.5コンポーネント例

var appMenuTemplate = " 
    <nav class='menu'> 
    <ul> 
     <li ng-repeat='item in menuCtrl.menuItems'> 
     {{ item }} 
     </li> 
    </ul> 
    </nav> 
"; 

var appMenuController = function() { 
    var self = this; 
    self.menuItems = [ 
    'home', 
    'about', 
    'portfolio', 
    'experience' 
    ]; 
}; 

angular 
    .module('exampleApp', []) 
    .component('appMenu', { 
    template: appMenuTemplate, 
    controller: appMenuController, 
    controllerAs: 'menuCtrl' 
    });

https://jsfiddle.net/dzaslow/ej8r3vyo/1/

出典

2016-06-23 Dean Zaslow

はそれを行う方法です。主にコンポーネントを使用する方法を学びました（todd motto's posts）。 templateではなく、templateUrlを使うべきでしょう。

(function() { 
 
    'use strict'; 
 

 
    angular 
 
    .module('exampleApp', []) 
 
    .component('appMenu', { 
 
     template: "<nav class='menu'> \ 
 
    <ul> \ 
 
     <li ng-repeat='item in vm.menuItems'> \ 
 
     \t {{ item }} \ 
 
     </li> \ 
 
    </ul> \ 
 
    </nav>", 
 
     controller: AppMenuController, 
 
     controllerAs: 'vm' 
 
    }); 
 

 
    function AppMenuController() { 
 
    var vm = this; 
 
    vm.menuItems = [ 
 
     'home', 
 
     'about', 
 
     'portfolio', 
 
     'experience' 
 
    ]; 
 
    } 
 

 
    AppMenuController.$inject = []; 
 
})();

.menu > ul > li { 
 
    display: inline; 
 
    margin-right: 1em; 
 
}

<!DOCTYPE html> 
 
<html ng-app='exampleApp'> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <app-menu></app-menu> 
 
</body> 
 

 
</html>

出典

2016-06-23 13:30:05 ScottL

これはjsfiddleでいくつかの問題がある場合は、「ファイル名を指定して実行コードスニペット」をクリックすると、あなたが働くので、私はいつもtemplateUrlを使用しますが、jsfiddleを使用しているとき、それは正確に実用的ではありません...私は、疑問に思ってjsfiddleでは動作しません。 –

答えて

関連する問題