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

问题描述

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

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表达式计算inner-class属性的值

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. href ="https://docs.angularjs.org/api/ng/type/ngModel.NgModelController" rel ="nofollow noreferrer"> 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屋！