取代内容不起作用的指令

Question

我有一个简单的指令，应该用一个字符串替换一个数字，但它会一直显示数字。

// CS compiled
app.directive('stock', [
  '$interpolate', function($interpolate) {
    return {
      restrict: 'C',
      link: function(scope, element) {
        var display, html;
        html = $interpolate(element.html())(scope);
        display = (function() {
          switch (html) {
            case '0':
              return 'Out of stock';
            case '1':
              return 'Available';
            case '2':
              return 'Available 3-5 days';
            case '3':
              return 'Available 2 weeks';
            case '4':
              return 'Available 2 months';
            default:
              return '';
          }
        })();
        return element.html(display);
      }
    };
  }
]);

调试时，我看到内容正在被替换。

FIDDLE

Answer 1

首先，您需要将0作为字符串传递。你应该使用范围并获得状态，这将更容易。 FIDDLE

TPL：

<div ng-app="myApp">
    <label class="stock" status="status"></label>
</div>

JS：

// CS compiled
app = angular.module('myApp', [])
app.run(function ($rootScope) {
    $rootScope.status = '0'; //pass as string since you filter on string in the case statement
})
app.directive('stock', [
    '$interpolate', function ($interpolate) {
    return {
        restrict: 'C',
        scope: {
            status: '=status'
        },
        link: function (scope, element) {
            var display, html;
            html = $interpolate(element.html())(scope);
            display = (function () {
                switch (scope.status) {
                    case '0':
                        return 'Out of stock';
                    case '1':
                        return 'Available';
                    case '2':
                        return 'Available 3-5 days';
                    case '3':
                        return 'Available 2 weeks';
                    case '4':
                        return 'Available 2 months';
                    default:
                        return '';
                }
            })();
            return element.html(display);
        }
    };
}]);

Answer 2

问题是您在元素中使用{{...}}，因此angular负责更新元素的内容，您对innerHTML的手动更改会被框架有效覆盖。此外，您的实现是使用HTML文本作为共享数据的媒介，这不是处理数据的角度方式。

sza的答案已经解决了问题，它运作得很好;但是，根据您的问题，我发现您不想为此指令创建新的范围，那么指令的范围为$rootScope，您可以完全访问status只需在链接功能中使用scope.status即可。

HTML：

<div ng-app="myApp">
    <label class="stock"></label>
</div>

JS：

app.directive('stock', function () {
    return {
        restrict: 'C',
        link: function (scope, element) {
            var display = (function () {
                switch (scope.status) {
                    case 0:
                        return 'Out of stock';
                    case 1:
                        return 'Available';
                    case 2:
                        return 'Available 3-5 days';
                    case 3:
                        return 'Available 2 weeks';
                    case 4:
                        return 'Available 2 months';
                    default:
                        return '';
                }
            })();
            element.html(display);
        }
    };
});

http://jsfiddle.net/6Vyz9/1/

此外

如果您希望在status更改时标签自动更新，您可以在链接功能中使用$watch。

JS：

app.directive('stock', function () {
    return {
        restrict: 'C',
        link: function (scope, element) {
            scope.$watch('status', function () {
                var display = (function () {
                    switch (scope.status) {
                        case 0:
                            return 'Out of stock';
                        case 1:
                            return 'Available';
                        case 2:
                            return 'Available 3-5 days';
                        case 3:
                            return 'Available 2 weeks';
                        case 4:
                            return 'Available 2 months';
                        default:
                            return '';
                    }
                })();
                element.html(display);
            });
        }
    };
});

http://jsfiddle.net/6Vyz9/2/