javascript - AngularJS template vs templateURL in directive -
i have directive defined 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 "templateurl"
returns this:
... <textarea class="form-control textarea-resize" ng-keyup="commentpost($event)" ng-model="textcomment"></textarea> ...
in itemlibrarycontroller have defined method commentpost() accessed on keyup on textarea. problem $scope.textcomment = undefined
instead of value entered in textarea. if modify in html ng-model="$parent.textcomment"
value textarea found in $scope.textcomment
.
ps. when using "template" instead of "templateurl" in directive definition, ng-model problem disappears.
my questions are:
why have use $parent.textcomment since scope of template itemlibrarycontroller?
why using templateurl creates scope ng-models inside template?
why, when using "template" instead of "templateurl" in directive definition, ng-model problem disappears?
how can access textcomment without using $parent.textcomment?
the problem solve issue using dot rule of angularjs, object [**prototypal inheritance**][1]. need create , object , add the
textcommentin it, object like
$scope.library={}then
textcommentwill placed in it. need make add
scope: true` directive follow inheritance of object.
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 } }; }]);
Comments
Post a Comment