AngularJS - 指令的类名不能带入内部模板 [英] AngularJS - Directive's class name cannot bring into inner template

问题描述

我想制作一个有条件地采用类名的指令.但是，我发现只有将类名硬编码到类属性中，我的代码才能工作.如果我尝试将它与任何表达式一起使用，则无法正常工作.

I want to make a directive which take a class name conditionally. However, I found that my code can work only if I hardcode the class name into the class attribute. If I try to use it with any expression, its failed to work.

例如

// HTML

// Doesn't work (cannot find class="editable" in the final output template)
<tit-txt ng-class="true ? 'editable' : ''" ng-model="mdEnt.phone"></tit-txt>

// Works! (I can find class="editable" in the final output template)
<tit-txt class="editable" ng-model="mdEnt.phone"></tit-txt>

<小时>

//JS

.directive('titTxt', function () {
    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
        },
        link: function (scope, element, attrs) {
            scope.editable = element.hasClass('editable') ? 'editable' : '';
        },
        template: '<input ng-class="editable" ng-model="ngModel" />',
    };
})

谁能向我解释为什么会这样?如何将其与表达式一起使用?

Anyone can explain to me that why is it happening? How can I use it with expression?

更新 1

// HTML

// Doesn't work
<tit-txt ng-class="{'editable': true}" ng-model="mdEnt.phone"></tit-txt>

<小时>

//JS

.directive('titTxt', function () {
    return {
        restrict: 'E',
        scope: {
            title: '@',
            fieldName: '@',
            ngModel: '=',
        },
        link: function (scope, element, attrs) {
            console.log(element.hasClass('editable'));
            scope.editable = element.hasClass('editable') ? 'editable' : '';
        },
        template: '<div><span>{{title}}: </span><input id="{{fieldName}}" ng-class="{editable: true}" name="{{fieldName}}" ng-model="ngModel" /></div>',
    };
})

任何人都可以向我解释为什么我在 console.log(element.hasClass('editable')); 中得到 false?

Anyone can explain to me that why I get false in the console.log(element.hasClass('editable'));?

推荐答案

使用 class 属性，元素的类由 JavaScript 设置.使用 ng-class 指令，该类由 AngularJS 框架设置.当一个元素上有多个指令时，无法保证各个指令代码的执行顺序.

With the class attribute, the element's class is set by JavaScript. With the ng-class directive, the class is set by the AngularJS framework. When there are more that one directive on an element, there is no guarantee of the order of execution of the code of the respective directives.

避免让 AngularJS 操作 DOM 并让后续的 AngularJS 根据 DOM 的状态操作模型.使用 MVC 框架，模型应该是单一事实来源，并且 DOM 应该直接由模型.

Avoid having AngularJS manipulate the DOM and having subsequent AngularJS manipulate the model based on the state of the DOM. With MVC frameworks the Model should be the single source of truth and the DOM should be directly determined by the Model.

<tit-txt inner-class="true ? 'editable' : ''" my-model="mdEnt.phone">
</tit-txt>

app.directive('titTxt', function () {
    return {
        restrict: 'E',
        scope: {
            title: '@',
            fieldName: '@',
            innerClass: '<',
            myModel: '=',
        },
        link: function (scope, element, attrs) {
            scope.$watch(attrs.innerClass, function(newValue) {
                console.log("inner-class=", newValue);
            });
        },
        template: `<div><span>{{title}}: </span>
                      <input id="{{fieldName}}" ng-class="innerClass"
                             name="{{fieldName}}" ng-model="myModel" />
                   </div>`,
    };
})

注意指令如何使用单向，'<'，绑定以从 AngularJS 表达式.

Notice how the directive uses one-way, '<', binding to compute the value of the inner-class attribute from an AngularJS Expression.

另请注意，我将 ng-model 更改为 my-model.ng- 前缀是为核心 AngularJS 指令保留的.除非自定义指令ng-model> 与 ngModelController 正确集成.

Also notice that I changed ng-model to my-model. The ng- prefix is reserved for core AngularJS directives. Use of ng-model should be specifically be avoided unless the custom directive properly integrates with the ngModelController.

这篇关于AngularJS - 指令的类名不能带入内部模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！