AngularJS template vs templateURL in directive

Question

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:

...
<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. The problem is that $scope.textComment = undefined instead of the value entered in textarea. If i modify in html ng-model="$parent.textComment" then the value from the textarea is found in $scope.textComment.

PS. When using "template" instead of "templateUrl" in the directive definition, the ng-model problem disappears.

My questions are:

1. Why do i have to use $parent.textComment since the scope of the template is the ItemLibraryController?

2. Why using templateUrl creates another scope for the ng-models inside the template?

3. Why, when using "template" instead of "templateUrl" in directive definition, the ng-model problem disappears?

4. How can i access textComment without using $parent.textComment?

Answer 1

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 thetextCommentin it, so the object will look like$scope.library={}thentextCommentwill be placed in it. Also you need to make addscope: true` to say that directive will follow inheritance of an 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
        }
    };
}]);