Question

我有一个调用模板的指令。在模板中我使用的是ng-class，它在点击时添加了一个类。但是，点击后，这个类就不会被添加。

指令：

app.directive('myDirective', function () {
        return {
            restrict: 'E',
            scope: {
                data: "="
            },
            templateUrl: 'home/user.html'
        }
    }
);

家/ user.html

<label for="firstname">First Name</label>
<input type="text" ng-model="data.input[0].value" required ng-class="{true : 'necessary'}[errorFirstName]" id="firstname">

的index.html：

<div ng-controller="MyController">

    <my-directive data="myData"></my-directive>

    <button ng-click="checkUsr()">Check user</button>
</div>

MyController.js

app.controller('MyController', function($scope) {

    $scope.checkUsr = function() {
        $scope.errorFirstName = true;
    }
});

更新：

我也尝试过compilign：

app.directive('myDirective', function ($compile) {
        return {
            restrict: 'E',
            scope: {
                data: "="
            },
            templateUrl: 'home/user.html',
            link: function(scope, element, attrs) {

                $compile(element.contents())(scope);

            }
        }
    }
);

Answer 1

所以，我能够达到预期结果的唯一方法是：

app.controller('MyController', function($scope) {

    $scope.checkUsr = function() {
        var myEl = angular.element( document.querySelector( '#username' ) );
        var angElement = angular.element(myEl);
        angElement.addClass('neccessary');
    }

});

这感觉就像添加课程的一种非常古老的方式，而且根本就没有使用ng-class。

思想？

Answer 2

改变了你的输入..

<input type="text" ng-model="firstName" ng-class="{neccessary : errorFirstName}" id="firstname" required />

请查看我的Fiddle并告诉我它是否适合您。

ng-class不使用templateURL处理自定义指令

2 个答案: