使用Angularjs組件的簡單Hello World

這是我第一次嘗試使用angularJs組件，因此請耐心等待。任何想法爲什麼它不打印Hello World？使用Angularjs組件的簡單Hello World

http://plnkr.co/edit/D3DMVAaechJUj4ZzPBDL?p=preview

的script.js

(function() { 

    'use strict'; 

    angular 
     .module('myApp', []) 
     .component('sampleComponent', { 
      template: '<h1>Hello {{$ctrl.name}}!</h1>', 
      bindings: { 
       name: '<' 
      }, 
      controller: function() { 
       //alert('here'); 
      } 
     }); 

})();

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script> 
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 
    <body ng-app="myApp"> 
    <sample-component name="World"></sample-component> 
    </body> 
</html>

來源

2017-06-03 Raoul

您使用'<'你綁定。這意味着當傳遞name="World"時，World應該是一個Angular表達式，其值傳遞給組件。由於在根作用域中沒有World變量，因此它未定義，因此顯示一個空字符串。

使用'@'爲您的綁定，或使用name="'World'"。

來源

2017-06-03 10:59:27

使用Angularjs組件的簡單Hello World

回答

相關問題