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

Question

我有一个调用模板的指令。在模板中，我使用的是 ng-class，它会在点击时添加一个 class。但是，单击时，不会添加此 class。

指令：

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

home/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;
    }
});

更新：

我也试过编译:

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');
    }

});

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

想法？

Answer 2

围绕您的输入进行了更改..

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

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

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

ng-class not working on a custom directive with templateURL

javascript

angularjs

angularjs-scope

ng-class

angular-directive