Angular 1.5 - Component() 方法

Question

我正在尝试让 Angular 1.5 的新组件方法工作。到目前为止，我实现了以下目标，请参阅我的 jsFiddle JSFIDDLE。由于某种原因，我无法使 templateUrl 正常工作，因此我可以看到具有定义范围的 html 模板。任何帮助都会很棒。

JSFIDDLE JS

var app = angular.module('myApp', []);
app.controller('mainCtrl', function($scope) {

   $scope.name = "Tony Danza";


});

app.component("myBox",  {
      bindings: {},
      controller: function($element) {
        var myBox = this;
        myBox.game = 'World Of warcraft';
      },
      controllerAs: 'myBox',
      templateUrl: "/template",
      transclude: true
})

HTML

<div ng-app="myApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="/template">
    <div style='width:40%;border:2px solid black;background-color:yellow'>
      Your Favourite game is: {{myBox.game}}
    </div>
  </script>



  Hi {{name}}
  <div my-box>
  </div my-box>

</div><!--end app-->

Answer 1

Angular 组件必须是元素。使用<my-box> 而不是<div my-box>。

The documentation on Components 并未立即说明这一点，但已记录在案。

当你想要一个由属性或 CSS 类而不是元素触发的指令时

The directive/component comparison table 还解释了restrict 不可用于组件，它们始终是元素。