AngularJS如何重写 / 恭维 ng-class 指令与替换模板中︰ 真实

发布时间: 2017/4/16 20:46:20
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

而不删除 replace: true ,如何可以 ng-class 用于下面的指令而不会造成一个错误 / 冲突与模板 ng-class 吗?

目前,这将引发以下角误差︰

错误︰ 语法错误︰ 令牌 ' {' 是意外的标记在表达式的列 16 [{自定义︰ 真实} {自定义︰ 设置 = = '自定义',其他︰ 设置 = = '其他'}] 起价 [{自定义︰ 设置 = = '自定义',其他︰ 设置 = = '其他'}]。

HTML

<div ng-app="MyApp" ng-controller="MyCtrl">
  <setting settings="settings.someProperty" 
    ng-class="{custom: true}" />
</div>

JS

var myApp = angular.module('MyApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.settings = {
    someProperty: ''
  }
});

myApp.directive('setting', function() {
  return {
    restrict: 'E',
    // Removing this is NOT an option
    replace: true,
    require: '^myCtrl',
    template: '<div ng-class="{myclass:settings==\'custom\', other: settings==\'other\'}"><input type="radio"  name="mySetting" ng-model="settings" value="other" />TEST</div>',
    scope: {
      settings: '=',
    }
  };
});

此安装程序 jsFiddle

解决方法 1:

看进角的编译,我们可以看到这是一个从 (你 jsFiddle 使用 v1.1.5,但是这片没有改变甚至 v1.5.0) 的mergeTemplateAttributes函数的问题。其实还有关闭 bug #7402引用同样的问题。从该 bug 报价@lgalfaso

我同意这是一个问题 ng-class 就像它是一个在所有情况下,在#7402 (评论)所说的问题这是一个已知的错误和指令替换的局限性在于︰ 真实

因此,简而言之,没有一些变通办法你不能这样。请注意,替换是建议不再使用,所以你真的应该尝试删除 replace: true 。然而,你可以通过改变它的工作对你有利。

而不是传递一个字符串,可以将一个函数传递给模板。此函数将执行与 tElement 和 tAttrs。如果你想要完全替换属性,设置 tAttrs.ngClass 为一个空字符串将删除冲突。

template: function(tElement, tAttrs) {
        tAttrs.ngClass="";
        return '<div ng-class="{custom:settings==\'custom\', other: settings==\'other\'}"><input type="radio"  name="mySetting" ng-model="settings" value="other" />TEST<br> <input type="radio"  name="mySetting" ng-model="settings" value="" />{{settings}}</div>'
},

下面是示例当副手。如果您更改 someProperty 到对方,你会看到它正确地更改背景为黄色


另一方面,如果你想要扩展合并两个相互矛盾的指令属性值,这将是有点更多地参与和多一点架空。它仍然需要设置为空字符串,但首先将其添加到 tAttrs.ngClass ng-class 像这样︰

template: function(tElement, tAttrs) {
    var newNgClass = "{custom:settings==\'custom\', other: settings==\'other\'}";
    var oldNgClass = tAttrs.ngClass;
    var mergedNgClass = "extend(" + oldNgClass + "," + newNgClass + ")";
    tAttrs.ngClass = "";
    return '<div ng-class="' + mergedNgClass + '"><input type="radio"  name="mySetting" ng-model="settings" value="other" />TEST<br> <input type="radio"  name="mySetting" ng-model="settings" value="" />{{settings}}</div>'
},
link: function(scope) {
    scope.extend = angular.extend;
}

而不是合并两个角表达式字符串,这依赖于对 angular.extend 的范围,不是,所以它必须添加链接的功能。这里是另一个示例小提琴。

赞助商