使用 Angularjs 个组件的简单 Hello World

Question

这是我第一次尝试 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="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script data-require="angular.js@1.6.2" 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>

Answer 1

您正在使用 '<' 进行绑定。这意味着当传递 name="World" 时，World 应该是一个 Angular 表达式，其值被传递给组件。由于您在根范围内没有 World 变量，因此它是未定义的，因此显示一个空字符串。

使用 '@' 进行绑定，或使用 name="'World'".

使用 Angularjs 个组件的简单 Hello World

Simple Hello World using Angularjs components

angularjs

angularjs-components