The DEMO

Question

我得到了以下代码。我希望它会显示 true 。但是，这显示我是假的。

任何人都可以向我解释并提供一个解决方案来检查该类中是否存在类？提前谢谢。

// HTML
<tit-txt class="{{editable}}" ng-model="mdEnt.phone"></tit-txt>

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

Answer 1

尝试这样做：

// HTML
<div ng-app="myApp" ng-controller="myController">
  <tit-txt custom-class="customClass" 
          cust-var="myVal"></tit-txt>
          <div ng-bind="myVal"></div>
</div>

//JS
var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.customClass = "editable";
  $scope.myVal = "this";
});

app.directive('titTxt', function () {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            customClass: '=',
            custVar: '='
        },
        link: function (scope, element, attrs) {
            console.log(scope);
            console.log((scope.customClass === "editable"));
        },
        template: '<input class="myClass" ng-Model="custVar"/>',
    };
})

编辑：编辑代码以包含工作代码。以下是plunker

的链接

Answer 2

使用观察程序检测课程的更新时间：

app.directive('titTxt', function () {
    return {
        restrict: 'E',
        scope: {
            myModel: '=',
        },
        link: function (scope, element, attrs) {
            scope.$watch(hasClassEditable, function() {
                console.log(element.hasClass('editable'));
            });

            function hasClassEditable() {
                return element.hasClass('editable');
            }
        },
        template: '<input ng-model="myModel" />',
    };
})

class={{editable}}等插值绑定会更新每个摘要周期。该指令需要在使用该值之前等待绑定更新。

The DEMO

＆＃13;

angular.module("app",[])
.run(function($rootScope,$timeout) {
  $rootScope.$timeout = $timeout;
})
.directive('titTxt', function () {
    return {
        restrict: 'E',
        scope: {
            myModel: '=',
        },
        link: function (scope, element, attrs) {
            scope.$watch(hasClassEditable, function(value) {
                console.log("has class 'editable'", value);
            });

            function hasClassEditable() {
                return element.hasClass('editable');
            }
        },
        template: '<input ng-model="myModel" />',
    };
})

＆＃13;

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <input type="checkbox" ng-model="editable" ng-change="$timeout()"
           ng-true-value="'editable'" ng-false-value="''" />
        add class "editable"
    <br>
    <tit-txt class="{{editable}}" my-model="inputTxt"></tit-txt>
    <br>
    editable="{{editable}}"
    <br>
    inputTxt="{{inputTxt}}"
    
  </body>

＆＃13;

Answer 3

请改为尝试：

link: function (scope, element, attrs, controller) {
  console.log(angular.element(element).hasClass('editable'));
}

Answer 4

尝试预功能，

        link: {
                    pre: function(scope, element, attr, controllers) {
                        console.log(element.hasClass('editable'));
                    },
                    post: function(scope, element, attr, controllers) {

                    },
       }

AngularJS - 为什么我不能在指令的链接函数中获取元素类名？

4 个答案:

The DEMO