为什么AngularJS重复指令的输出？

所以我有这个指令

(function () {

angular.module("qnlAngularApp").directive('boxDisplay', ['$log', function ($log) {

    var linkFn = function (scope, element, attributes) {

        scope.backgroundColor = (attributes["boxBackgroundColor"] ? attributes["boxBackgroundColor"] : "#ccc");
        scope.backgroundImage = (attributes["boxBackgroundImage"] ? attributes["boxBackgroundImage"] : "");
        scope.opacity = (attributes["boxOpacity"] ? attributes["boxOpacity"] : "1");
        scope.borderWidth = (attributes["boxBorderWidth"] ? attributes["boxBorderWidth"] : 0);
        scope.borderColor = (attributes["boxBorderColor"] ? attributes["boxBorderColor"] : "#000");
        scope.borderRadius = (attributes["boxBorderRadius"] ? attributes["boxBorderRadius"] : 0);
        scope.id = (attributes["id"] ? attributes["id"] : "12345");

        scope.heading = (attributes["boxHeading"] ? attributes["boxHeading"] : "Lorem Ipsum Heading");
        scope.icon = (attributes["boxIcon"] ? "<img src='" + attributes["boxIcon"] + "' sr-only='" + scope.heading + "' alt='" + scope.heading + "' title='" + scope.heading + "' />" : "");

        //scope.templateName = "angular/templates/" + (attributes["boxTemplate"] ? attributes["boxTemplate"] : "boxDisplay_Basic.html");

        scope.flexValue = (attributes["boxWidth"] ? attributes["boxWidth"] : "100");

        scope.backgroundStyle = "background-color: " + scope.backgroundColor + ";opacity: " + scope.opacity + ";" + ((scope.backgroundImage != "") ? "background-image: url('" + scope.backgroundImage + "');" : "");

        scope.borderStyle = ("border: solid " + scope.borderWidth + "px " + scope.borderColor + ";"); //+

        //((borderRadius > 0) ? "border-radius: " + borderRadius + "px " + borderRadius + "px " + borderRadius + "px " + borderRadius + "px;" +
        //    "-moz-border-radius: " + borderRadius + "px " + borderRadius + "px " + borderRadius + "px " + borderRadius + "px;" +
        //    "-webkit-border-radius: " + borderRadius + "px " + borderRadius + "px " + borderRadius + "px " + borderRadius + "px;" : "");
    }

    return {
        restrict: 'E',
        templateUrl: function (elems, attrs) {
            return "angular/templates/" + (attrs["boxTemplate"] ? attrs["boxTemplate"] : "boxDisplay_Basic.html");
        },
        transclude: true,
        replace: true,
        link: linkFn
    };

            }]);
}())

（函数（）{
angular.module（“qnlAngularApp”）.指令（'boxDisplay'，['$log'，函数（$log）{
var linkFn=函数（范围、元素、属性）{
scope.backgroundColor=（属性[“boxBackgroundColor”]？属性[“boxBackgroundColor”]：“#ccc”）；
scope.backgroundImage=（属性[“boxBackgroundImage”]？属性[“boxBackgroundImage”]：“”）；
scope.opacity=（属性[“boxOpacity”]？属性[“boxOpacity”]：“1”）；
scope.borderWidth=（属性[“boxBorderWidth”]？属性[“boxBorderWidth”]：0）；
scope.borderColor=（属性[“boxBorderColor”]？属性[“boxBorderColor”]：“#000”）；
scope.borderRadius=（属性[“boxBorderRadius”]？属性[“boxBorderRadius”]：0）；
scope.id=（属性[“id”]？属性[“id”]：“12345”）；
scope.heading=（属性[“boxHeading”]？属性[“boxHeading”]：“Lorem Ipsum heading”）；
scope.icon=（属性[“boxIcon”]？：）；
//scope.templateName=“angular/templates/”+（属性[“boxTemplate”]？属性[“boxTemplate”]：“boxDisplay_Basic.html”）；
scope.flexValue=（属性[“boxWidth”]？属性[“boxWidth”]：“100”）；
scope.backgroundStyle=“background color:”+scope.backgroundColor+”；“+（（scope.backgroundImage！=”）？”背景图像：url（“+scope.backgroundImage+”）；“：”）；
scope.borderStyle=（“边框：实心”+scope.borderWidth+“px”+scope.borderColor+“；”）//+
//（（borderRadius>0）？“边界半径：”+borderRadius+“px”+borderRadius+“px”+borderRadius+“px”+borderRadius+“px；”+
//-moz边界半径：“+borderRadius+”px“+borderRadius+”px“+borderRadius+”px“+borderRadius+”px；”+
//“-webkit边框半径：“+borderRadius+”px“+borderRadius+”px“+borderRadius+”px“+borderRadius+”px；“：”）；
}
返回{
限制：'E'，
templateUrl:函数（元素、属性）{
返回“angular/templates/”+（attrs[“boxTemplate”]？attrs[“boxTemplate”]：“boxDisplay_Basic.html”）；
},
是的，
替换：正确，
链接：linkFn
};
}]);
}())

这个模板呢

<div flex="{{flexValue}}" id="{{id}}" class="box" style="borderStyle}};{{backgroundStyle}}">
<div layout="column">
    <div layout="row">
        {{icon}}
        <h3>{{heading}}</h3>
    </div>
    <div layout="row" ng-transclude>

    </div>
</div>

{{icon}}
{{heading}}

这是Index.html文件

<body ng-app="qnlAngularApp">
<div ng-controller="mainCtrl">

    <div layout="row" class="boxRow">
        <box-display box-width="33" id="1" box-background-color="#aaa" box-heading="First">See this box display</box-display>

        <box-display box-width="33" id="2" box-border-radius="5" box-heading="Second" box-border-width="5" box-template="boxDisplay_alt.html">See this box display too</box-display>

        <box-display box-width="33" id="3" box-template="boxDisplay_alt.html" box-heading="Third">See this box display three</box-display>
    </div>


    <div layout="row">

    </div>
    <div layout="row">

    </div>
</div>
</body>

看到这个显示框了吗
也看到这个盒子了吗
看到这个盒子显示三个吗

---

为什么它在所有三个div中显示相同的结果？这是缓存问题吗？异步问题？优化问题？有人能告诉我我做错了什么吗？

这是因为指令的

范围

属性未定义，这是错误的。您的框都共享相同的范围，因为：

• 范围

  参数为falsy
• 所有三个框都具有相同的父对象
• 这些元素不使用任何其他创建新范围的指令

因此，它们都将显示保存值

要解决此问题，只需更改指令以返回以下内容：

return {
    restrict: 'E',
    scope: true,
    templateUrl: function (elems, attrs) {
        return "angular/templates/" + (attrs["boxTemplate"] ? attrs["boxTemplate"] : "boxDisplay_Basic.html");
    },
    transclude: true,
    replace: true,
    link: linkFn
};

---

请注意，

scope:true，

@user1872371在答案中添加了一个示例解决方案。您还可以通过在创建自己作用域的同一元素上使用另一个指令来解决这个问题。但是，除非你需要另一个指令，否则不要刻意去做。