Question

我正在尝试创建一个“乐器”指令。我已经在我的index.html中添加了三个乐器，但是我没有再显示它们，而是看到最后一个重复了三次： enter image description here

/**
 * Created by Shalmu Y. on 26.05.2015.
 */
/* @flow */
"use strict";
(function () {
  const app = angular.module('Lesson3', []);
  app.directive('instrument', function () {
    return {
      restrict:'E',
      link: function (scope, el, attr) {
        function cap(s){  return s.charAt(0).toUpperCase()+ s.substr(1);    }
        scope.strain = cap(attr.kind);
        scope.caption = cap(attr.name);
      },
      template:'<span style="padding:4px; border:2px dotted #080;">{{strain}} - {{caption}}</span>'
    };
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<!-- Created by Shalmu Y. on 26.05.2015 -->
<html ng-app="Lesson3">
<head lang="en">
    <link rel="stylesheet" type="text/css" href="styles/style.css">
    <meta charset="UTF-8">
    <title>Lesson 3</title>
</head>
<body>
    <instrument kind="brass" name="trumpet"></instrument>
    <instrument kind="string" name="guitar"></instrument>
    <instrument kind="woodwind" name="clarinet"></instrument>
</body>
</html>

Answer 1

您没有指令范围，因此使用父范围。所以实际上你只有一个scope.strain和scope.caption。

你可以做的是添加到指令：

scope : {
  strain: '=kind',
  caption: '=name'
}

删除链接函数并在指令模板中使用大写过滤器。

Demo Plunkr

Angular指令仅重复最后一个元素

1 个答案: