Question

这是我的问题。谢谢你的帮助！

意图

我有一个页面，我需要获取项目的状态概述。我的模型中有状态和性能属性。我想要显示一个绿色圆圈，如果他们在轨道上，红色如果延迟等... 我正在使用Angular和Bootstrap，所以我尝试创建一个自定义指令，它包装一个Bootstrap下拉列表并绑定要更新的model属性。如果要将状态从“正常”更改为“延迟”，则单击圆圈，打开一个下拉菜单，选择正确的菜单项，更改模型并相应地更新圆形颜色。

问题

只要我放1指令，evething工作正常。当我插入多个时，最后一个是唯一一个得到更新的。如果我点击一个圆圈，菜单会打开，但更改的模型是最后一个，而不是正确的模型。

示例

我的指示：

angular.module("samson", [])
.controller("overviewCtrl", function ($scope) {
    $scope.status = "On track";
    $scope.tsaStatus = "Completed";
    $scope.performance = "Risk of delay";
})
.directive("clickableStatusIcon", function () {
    return {
        replace: true,
        restrict: 'E',
        transclude: true,
        template: '<div class="dropdown">' +
        '<div class="circle on-track dropdown-toggle" data-toggle="dropdown" aria-expanded="true"></div>' +
        '<ul class="dropdown-menu" role="menu">' +
        '<li role="presentation"><a data-ng-click="onTrack()" role="menuitem" tabindex="-1" href="javascript:;">On track</a></li>' +
        '<li role="presentation"><a data-ng-click="riskOfDelay()" role="menuitem" tabindex="-1" href="javascript:;">Risk of delay</a></li>' +
        '<li role="presentation"><a data-ng-click="delayed()" role="menuitem" tabindex="-1" href="javascript:;">Delayed</a></li>' +
        '<li role="presentation"><a data-ng-click="completed()" role="menuitem" tabindex="-1" href="javascript:;">Completed</a></li>' +
        '</ul>' +
        '</div>',
        scope: {
            target: '=ngModel',
            name: '@'
        },
        require: 'ngModel',

        link: function ($scope, elem, attr) {

            classCleaner = function (newValue) {
                angular.element(elem.children()[0]).removeClass("on-track risk-of-delay delayed complete").addClass(status2ClassMapping[newValue]);
                $scope.target = newValue;
            }

            status2ClassMapping = {
                "On track": "on-track",
                "Risk of delay": 'risk-of-delay',
                "Delayed": "delayed",
                "Completed": "complete"
            };

            $scope.onTrack = function () {
                classCleaner("On track");
            }

            $scope.riskOfDelay = function () {
                classCleaner("Risk of delay");
            }

            $scope.delayed = function () {
                classCleaner("Delayed");
            }

            $scope.completed = function () {
                classCleaner("Completed");
            }

            classCleaner($scope.target);
        }
    }
});

您可以在此处查看示例：JSFiddle

请您提供一些关于为什么会发生这种情况的提示？请注意，代码不是那么干净，我知道这一点。字符串比较，text2 css类映射等......很难看，但请关注我定义模板和范围函数的方式。我担心问题存在，但我不明白为什么。

非常感谢

A

Answer 1

将$ scope添加到指令中的所有函数：

$scope.classCleaner
$scope.status2ClassMapping

然后它有效。另外我建议你：使用ng-repeat填充你的列表并使用ng-class来改变元素类。

Angular指令中的Bootstrap下拉菜单

1 个答案: