angularjs ng-class 在 html 来自对象属性

Question

我正在创建一个指令，您可以在其中传递不同类型的 html 元素并将它们注入 table。

但是有时我的用户可能需要在 ng-class 指令中添加某种表达式

例如检查以下内容：

$scope.element =        
  {
    html: '<button type="button" ng-class="element.classExpression">My  button</button>',
    classExpression : "element.classExpressionDefault ? 'btn-success': 'btn-danger'",
    classExpressionDefault: $scope.inactive,
   }

HTML:

<span ng-bind-html-unsafe="element.html">  </span>

请注意以上代码无效！

上面代码的问题是表达式没有被计算，因此它丢失了。

所以我的问题是我该如何添加它，这可能吗？

Answer 1

要完成您想要做的事情，您可能需要即时注入 $compile 和 compile 元素。另一种选择是以稍微不同的方式传递选项，并以不同的方式配置您的 DOM 以做出反应。

JSON:

$scope.inputs = [{
    type: 'text',
    classComparisonValue: 'someClass', // omit perhaps for other logic on DOM?
    model: 'myKey'
}]

还有你的DOM：

<div ng-repeat="input in inputs">
    <input type="text" class="input.class" 
          ng-model="inputAnswer[input.model]" 
          ng-if="input.type == 'text" 
          ng-class="{ 'btn-danger': input.classComparisonValue, 
                      'btn-success': !input.classComparisonValue">
    // Add other input types here with ng-if
</div>

Answer 2

正如 Brant 在他的回答中已经暗示的那样，您可以从指令中编译 $scope.element 的 html 来评估 angular 表达式。

为此，您需要注入 $compile 服务并使用指令 $scope 在 element.html:

上调用它

angular.module('ui.directives', []).directive('exampleDirective', ['$compile',
function ($compile) {
    return {
        restrict: 'E',
        scope: { element: '=' },
        template: '<span ng-bind-html-unsafe="element.html"></span>',
        link: function ($scope, element, attrs, controller) {
            $scope.element = {
                html: 'I am an <code>HTML</code>string with <p style="color: {{element.color}}">color</p>',
                color: 'red'
            }
            $scope.element.html = $compile($scope.element.html)($scope);
        }
    };
}]);

当然你可以通过使用指令的模板传入元素并定义父控制器：

$scope.element = {
            html: 'I am an <code>HTML</code>string with <p style="color: {{element.color}}">color</p>',
            color: 'red'
        }

模板：

<example-directive element="element"></example-directive>

JSFiddle：http://jsfiddle.net/8fw1gbrt/

angularjs ng-class 在 html 来自对象属性

angularjs ng-class on html from object property

javascript

angularjs

ng-class

angularjs ng-class 在 html 来自对象 属性

angularjs ng-class on html from object property

javascript

angularjs

ng-class

angularjs ng-class 在 html 来自对象属性