Angular指令只重複最後一個元素

我正在嘗試創建一個「instrument」指令。我已經增加了三個工具，以我的index.html，但不是他們展示的一切，我看到的是最後一個被重複了三次： enter image description here Angular指令只重複最後一個元素

/** 
 
* 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>

來源

2015-05-27 shal

我有一個類似的問題，我解決補充說：範圍：真正進入返回{}。 – AndreaM16

你不必範圍，指令，因此使用父範圍。所以實際上你只有一個scope.strain和scope.caption。

什麼ü可以做的是增加指令：

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

刪除你的鏈接功能和指令模板中使用大寫的過濾器。

Demo Plunkr

來源

2015-05-27 16:54:06

Angular指令只重複最後一個元素

回答

相關問題