I'm creating a custom directive, and this directive will needing handle ngModelOptions
of element, maybe I can do this changing element html with jQuery
selector, but I wanted to know if can I do this by javascript
for better consistency
我正在创建一个自定义指令,这个指令需要处理元素的ngModelOptions,也许我可以用jQuery选择器来做这个改变元素的html,但是我想知道我是否可以用javascript来实现更好的一致性
UPDATE 1
Because I will need set ngModelOptions="{updateOn:'blur'}
for all input in my form
因为我需要为表单中的所有输入设置ngModelOptions="{updateOn:'blur'}
So I want create a directive for do this, likely <input type='text' updateBlur/>
我想要创建一个这样的指令,可能是
I wanted to know if is possible set this options with code, likely this
我想知道是否可以用代码来设置这个选项,很可能是这个。
myElement.attrs.ngModelOptions.updateOn = "blur default";
2 个解决方案
#1
2
You have to do it in the "angular way", so you should do something like this in your directive:
你必须用“角度的方式”来做,所以你应该在你的指令中这样做:
angular.module("myApp").directive('myDirective', function($compile){
link: function(scope, element, attrs) {
scope.$watch( 'scope.someValue', function(){
element.attr('ng-model-options', "new value");
$compile(element.contents())(scope);
});
}
});
In this way you might check on the change of scope.someValue
, and apply the new value to the directive. You cannot do this with jquery, because angularJS won't get the changes.
通过这种方式,您可以检查范围的更改。并将新值应用到指令中。使用jquery不能这样做,因为angularJS不会得到更改。
But, using this $compile(element.contents())(scope);
will do the trick.
但是,使用该编译美元(element.contents())(范围);上大做文章。
EDIT: $scope.apply()
, shouldn't work. Because it's necessary to force a digest cycle (such as more elements are added to an array). Here you're changing the structure, so you need to re-compile it
编辑:$ scope.apply(),不应该工作。因为强制执行摘要循环是必要的(比如向数组添加更多的元素)。您正在更改结构,因此需要重新编译它
#2
1
Please be more specific on your problem.
请对你的问题说得更具体些。
The answer for the general question is that you should not use jQuery selectors for manipulating the DOM if you are using angular.
一般问题的答案是,如果使用角度,不应该使用jQuery选择器来操作DOM。
If what you need is to manipulate the ngModelOptions attribute, you should do that from within your directive, using the arguments of the link function:
如果您需要的是操作ngModelOptions属性,那么您应该使用link函数的参数在您的指令中进行操作:
link: function(scope, element, attrs){
...
//if you want to change the ngModelOptions attribute
$(element).attr('ng-model-options', 'whatever')
}
For a more detailed explanation: https://docs.angularjs.org/guide/directive
更详细的解释:https://docs.angularjs.org/guide/directive
#1
2
You have to do it in the "angular way", so you should do something like this in your directive:
你必须用“角度的方式”来做,所以你应该在你的指令中这样做:
angular.module("myApp").directive('myDirective', function($compile){
link: function(scope, element, attrs) {
scope.$watch( 'scope.someValue', function(){
element.attr('ng-model-options', "new value");
$compile(element.contents())(scope);
});
}
});
In this way you might check on the change of scope.someValue
, and apply the new value to the directive. You cannot do this with jquery, because angularJS won't get the changes.
通过这种方式,您可以检查范围的更改。并将新值应用到指令中。使用jquery不能这样做,因为angularJS不会得到更改。
But, using this $compile(element.contents())(scope);
will do the trick.
但是,使用该编译美元(element.contents())(范围);上大做文章。
EDIT: $scope.apply()
, shouldn't work. Because it's necessary to force a digest cycle (such as more elements are added to an array). Here you're changing the structure, so you need to re-compile it
编辑:$ scope.apply(),不应该工作。因为强制执行摘要循环是必要的(比如向数组添加更多的元素)。您正在更改结构,因此需要重新编译它
#2
1
Please be more specific on your problem.
请对你的问题说得更具体些。
The answer for the general question is that you should not use jQuery selectors for manipulating the DOM if you are using angular.
一般问题的答案是,如果使用角度,不应该使用jQuery选择器来操作DOM。
If what you need is to manipulate the ngModelOptions attribute, you should do that from within your directive, using the arguments of the link function:
如果您需要的是操作ngModelOptions属性,那么您应该使用link函数的参数在您的指令中进行操作:
link: function(scope, element, attrs){
...
//if you want to change the ngModelOptions attribute
$(element).attr('ng-model-options', 'whatever')
}
For a more detailed explanation: https://docs.angularjs.org/guide/directive
更详细的解释:https://docs.angularjs.org/guide/directive