Question

我的自定义指令无效：

HTML：

<body ng-controller="StoreController as store">
<ul class="list-group">
    <li class="list-group-item" ng-repeat="product in store.products">

<div>
        <h3>
        <product-title></product-title>
        </h3>

...

javascript.app：

...

app.directive('productTitle', function(){
    return {
        restrice: 'E',
        templateUrl: 'product-title.html'
    };
});

...

和我的product-title.html：

{{product.name}} 
<em class="pull-right"> {{product.price | currency}}</em>

在我的html页面中，我看不到产品名称和产品价格。

我是这个主题的新人:) 我该怎么做才能让它发挥作用？请帮帮我。

++谢谢大家的回答，这是有效的！我试了3天才找到答案..你在5分钟内做到了..谢谢！：）++

Answer 1

几个问题：

限制拼写错误
html的模板应该有一个根，所以你应该做这样的事情

<div> {{product.name}} <em class="pull-right"> {{product.price | currency}}</em> </div>

Answer 2

以下是此JSBin

中指令的完整运行代码

<强> JS

angular
  .module('app', [])
  .controller('AppController', function ($scope) {
    $scope.store = {
      products: [
        { id: 1, price: 132, name: 'abc' },
        { id: 2, price: 127, name: 'def' },
        { id: 3, price: 112, name: 'mno' },
        { id: 4, price: 145, name: 'xyz' }
      ]
    };
  })
  .directive('productTitle', function(){
    return {
        restrict: 'E',
        templateUrl: 'product-title.html'
    };
  });

<强> HTML

<div ng-controller='AppController'>
  <ul class="list-group">
    <li class="list-group-item" ng-repeat="product in store.products">
      <h3>
        <product-title></product-title>
      </h3>
    </li>
</ul>  

</div>

<script id="product-title.html" type="text/ng-template">
  {{product.name}} 
  <em class="pull-right"> {{product.price | currency}}</em>
</script>

angularjs

2 个答案: