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

角度组件必须是元素。使用<my-box>代替<div my-box>。

The documentation on Components并没有立即明确这一点，但有记录。

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

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

Angular 1.5 - Component（）方法

1 个答案: