Angular JS 1.5 组件 html 内容显示为在浏览器中注释掉

Question

我是 Angular 世界的新手，在尝试一些东西时，我基本上被一个基本的 Angular 组件问题困住了。

因此，我们的想法是简单地向页面添加一个名为“cast-tile”的自定义元素，该元素将由 angular 作为组件加载。 但是浏览器以某种方式将 ng-repeat 中的代码显示为注释。

我的代码在下面

索引.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="myCtrl">
  <h1>My Favourite X-Men's</h1>

  <sample-component data="Jack"></sample-component> <!-- this works -->

  <cast-tile cast="mutants"></cast-tile> <!-- does not work -->

</body>

</html>

脚本.js

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
  $scope.mutants = [{
    name: 'Wolverine',
    actor: 'Hujh Jackman',
    image: 'https://i.pinimg.com/originals/0e/a3/3b/0ea33b4fc6e96eb684d6eb9f9f66482d.jpg'
  }, 
  {
    name: 'Cyclops',
    actor: 'James Marsden',
    image: 'https://vignette.wikia.nocookie.net/xmenmovies/images/d/d3/Cyclops_04.jpg/revision/latest/scale-to-width-down/350?cb=20140330215941'
  }, 
  {
    name: 'Storm',
    actor: 'Hally Barry',
    image: 'https://vignette.wikia.nocookie.net/xmenmovies/images/a/a7/Storm_xmen3.JPG/revision/latest?cb=20120128061314'
  }];
});

myApp.component("castTile", {
  templateUrl: "myTemplate.html",
  bindings: {
    cast: '='
  },
  restrict: 'E',
  controller: function(){

  }
});

myApp.component("sampleComponent", {
  template: '<h3>Hello {{ $ctrl.data }}</h3>',
  bindings: {
    data: '@'
  },
  restrict: 'AE'
});

最后，myTemplate.html

<div class="tiles" ng-repeat="mutant in mutants">
  <h3>{{ mutant.name }}</h3>
  <p>{{ mutant.actor }}</p>
  <img width="100" height="150" ng-src="{{ mutant.image }}" />
</div>

浏览器控制台没有显示任何错误。

请在Plunker上找到代码

任何帮助是极大的赞赏！

Answer 1

好吧，包含mutants列表的绑定在您的组件castTile称为cast 。 此外，您还需要前缀cast用$ctrl. ，正如您在sampleComponent正确执行的那样：

<div class="tiles" ng-repeat="mutant in $ctrl.cast">

应该管用 ;-）

Angular JS 1.5 组件 html 内容显示为在浏览器中注释掉

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-02 18:41:33

Angular JS 1.5 组件 html 内容显示为在浏览器中注释掉

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-02 18:41:33

解决方案1
1 已采纳 2017-10-02 18:41:33