Angular 1.5組件示例

我使用的是Angular 1.5以前的版本，但我目前正在開發基於1.5組件的Web應用程序。經過很多故障排除之後，我仍然無法得到一個基本的模板工作 - 我能否獲得另一組眼睛，請告訴我以下簡單菜單組件有什麼問題？我感謝可能提供的任何幫助。Angular 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的組件。你應該也可以使用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

我總是用templateUrl，但使用的jsfiddle ......我想如果這是某些問題的jsfiddle時，當你點擊「運行代碼片段」它不是完全現實的，因爲你的工作但它不會在jsfiddle中運行。 –

回答

相關問題