angularjs - 替换内容的指令不起作用

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);
      }
    };
  }
]);

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

小提琴

Answer 1

首先，您需要将 0 作为字符串传递。而且您应该使用范围并获取状态，这会更容易。小提琴。

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完全访问。statusscope.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/