ng-class不能使用templateURL的自定义指令

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

指令：

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

UPDATE：

我试过compilign太：

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

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

      } 
     } 
    } 
);

来源

2015-05-29 Oam Psy

尝试范围：{data：“= data”} –

This this .. ng-class =“{neccessary：errorFirstName}” – adamjld

您没有在MyController中定义myData，并且您试图将它作为数据参数传递给你的指令。试着在MyController中初始化一个myData对象：'$ scope.myData = {errorFirstName：false};'然后稍微改变你的checkUsr函数：'$ scope.myData.errorFirstName = true;' –

所以，我已经能够达到预期结果的唯一途径是通过：

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

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

});

这感觉就像添加类的一种非常古老的方式，并且根本不使用ng类。

想法？

来源

2015-05-29 12:45:15

改变周围的输入..

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

请看看我的Fiddle，并告诉我，如果你的作品。

来源

2015-05-29 13:05:12 adamjld

ng-model需要保持data.input [0] .value的形式，将im绑定到页面加载时检索的对象。 –

是的，但是通过提供的信息，您已经为此问题提供了信息，但我无法在模型设置为'data.input [0] .value'时与文本输入交互。所以对于一个工作小提琴，它必须改变:) – adamjld

ng-class不能使用templateURL的自定义指令

回答

相关问题