Question

我正在尝试制作一个自定义指令，它将显示我之前在MainController中声明的一些元素

HTML正文：

<body ng-app="myApp" ng-controller="MainController">

<h1> Choose your Car </h1>
<div  ng-repeat="car in cars">
<my-pattern info="car"></my-pattern>
</div>

<script src="js/MainController.js"></script>

<script src="js/myPattern.js"></script>

</body>

MainController：

angular.module('myApp').controller('MainController',function($scope) {
         $scope.cars=[
            {
                icon: 'imgs/lamborghini.jpg',
                name: 'Lamborghini',
                price: 100000
            },
            {
                icon: 'imgs/audi.png',
                name: 'Audi',
                price: 80000
            }
         ];  
     });

自定义指令

angular.module('myApp').directive('myPattern', function() {
    return{
        restrict: 'E',
        scope:  {
            info: '='
        },
        templateUrl: 'js/directives/myPattern.html'
    };
});

模板：

<img ng-src="{{info.icon}}">
<h2>{{info.name}}</h2>
<p>{{info.price}}</p>

如果我不使用该指令，但我只是使输出白色表达式<h2>{{car.name}}</h2>像这样工作，但使用自定义指令它不会向我显示任何内容。我有不同的文件。

Answer 1

这对我有用。模板相对于当前HTML的位置一定存在问题：

var app = angular.module("myApp", []);

angular.module('myApp').controller('MainController', function($scope) {
  $scope.cars = [{
    icon: 'imgs/lamborghini.jpg',
    name: 'Lamborghini',
    price: 100000
  }, {
    icon: 'imgs/audi.png',
    name: 'Audi',
    price: 80000
  }];
});

angular.module('myApp').directive('myPattern', function() {
  return {
    restrict: 'E',
    scope: {
      info: '='
    },
    templateUrl: 'js/directives/myPattern.html'
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MainController">

  <h1> Choose your Car </h1>
  <div ng-repeat="car in cars">
    <my-pattern info="car"></my-pattern>
  </div>

  <script type="text/ng-template" id="js/directives/myPattern.html">
    <img ng-src="{{info.icon}}">
    <h2>{{info.name}}</h2>
    <p>{{info.price}}</p>
  </script>
</div>

Answer 2

我解决了，我没有同步自定义指令和正文HTML中的指令。代码是正确的但我犯了指令的调用脚本错误：

<script src="js/directives/myPattern.js"></script>

自定义指令和模板不起作用

2 个答案: