Question

所以我有这个指令

(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
    };

            }]);
}())

这个模板

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

这是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中显示相同的结果？这是缓存问题吗？异步问题？优化问题？有人能告诉我我做错了什么吗？

Answer 1

这是因为指令的scope属性未定义，这是假的。 A falsy value for the scope will mean the directive will use its parent's scope。你的盒子都有相同的范围，因为：

scope参数为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,行

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

1 个答案: