[英]AngularJS template vs templateURL in directive
I have a directive defined like this: 我有一个像这样定义的指令:
app.directive('itemComments', ['ajax', function(ajax) {
return {
restrict: 'A',
templateUrl: URL + 'public/Pages/Homepage/ajax/getCommentsTpl',
controller: 'ItemLibraryController',
controllerAs: 'itemLibraryCtrl',
link: function(scope, element, attr) {
var $element = $(element);
scope.$watch(function(scope) {
return $element.find('li').length > 0;
}, function(finished) {
if(finished) {
autosize($element.find('textarea'));
}
});
}
};
}]);
The template specified by "templateUrl"
returns something like this: "templateUrl"
指定的"templateUrl"
返回如下内容:
...
<textarea class="form-control textarea-resize" ng-keyup="commentPost($event)" ng-model="textComment"></textarea>
...
In ItemLibraryController I have defined the method commentPost() that is accessed on keyup on textarea. 在ItemLibraryController中,我定义了在textarea上的keyup上访问的方法commentPost()。 The problem is that
$scope.textComment = undefined
instead of the value entered in textarea. 问题是
$scope.textComment = undefined
而不是textarea中输入的值。 If i modify in html ng-model="$parent.textComment"
then the value from the textarea is found in $scope.textComment
. 如果我在html
ng-model="$parent.textComment"
修改,那么textarea中的值可以在$scope.textComment
找到。
PS. PS。 When using "template" instead of "templateUrl" in the directive definition, the ng-model problem disappears.
在指令定义中使用“template”而不是“templateUrl”时,ng-model问题消失了。
My questions are: 我的问题是:
Why do i have to use $parent.textComment since the scope of the template is the ItemLibraryController? 为什么我必须使用$ parent.textComment,因为模板的范围是ItemLibraryController?
Why using templateUrl creates another scope for the ng-models inside the template? 为什么使用templateUrl为模板内的ng-models创建另一个范围?
Why, when using "template" instead of "templateUrl" in directive definition, the ng-model problem disappears? 为什么在指令定义中使用“template”而不是“templateUrl”时,ng-model问题会消失?
How can i access textComment without using $parent.textComment? 如何在不使用$ parent.textComment的情况下访问textComment?
The problem to solve this issue would be using dot rule of AngularJS , so that the object will for [**prototypal inheritance**][1]. For that you need to create and object and add the
解决这个问题的问题是使用AngularJS的点规则
, so that the object will for [**prototypal inheritance**][1]. For that you need to create and object and add the
, so that the object will for [**prototypal inheritance**][1]. For that you need to create and object and add the
textComment in it, so the object will look like
$scope.library={} then
textComment will be placed in it. Also you need to make add
, so that the object will for [**prototypal inheritance**][1]. For that you need to create and object and add the
in it, so the object will look like
, so that the object will for [**prototypal inheritance**][1]. For that you need to create and object and add the
textComment in it, so the object will look like
$ scope.library = {}, then
textComment will be placed in it. Also you need to make add
will be placed in it. Also you need to make add
scope: true` to say that directive will follow inheritance of an object. will be placed in it. Also you need to make add
scope:true`来表示该指令将遵循对象的继承。
Template 模板
...
<textarea class="form-control textarea-resize"
ng-keyup="commentPost($event)"
ng-model="library.textComment">
</textarea>
...
Directive 指示
app.directive('itemComments', ['ajax', function(ajax) {
return {
scope: true, //<--added here
restrict: 'A',
templateUrl: URL + 'public/Pages/Homepage/ajax/getCommentsTpl',
controller: 'ItemLibraryController',
controllerAs: 'itemLibraryCtrl',
link: function(scope, element, attr) {
//code here
}
};
}]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.