AngularJS Vorlage vs templateURL in Richtlinie

Question

ich eine Richtlinie wie folgt definiert:

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

Die Vorlage angegeben durch "templateUrl" kehrt so etwas wie dieses:

... 
<textarea class="form-control textarea-resize" ng-keyup="commentPost($event)" ng-model="textComment"></textarea> 
... 

In ItemLibraryController ich die Methode commentPost definiert haben (), auf die über keyup auf textarea zugegriffen wird. Das Problem ist, dass $scope.textComment = undefined anstelle des Wertes in Textarea eingegeben. Wenn ich in HTML ng-model="$parent.textComment" ändern, dann wird der Wert aus dem Textarea in $scope.textComment gefunden.

PS. Wenn in der Richtliniendefinition "template" anstelle von "templateUrl" verwendet wird, verschwindet das ng-Modellproblem.

Meine Fragen sind:

1. Warum muss ich $ parent.textComment da der Umfang der Vorlage verwenden, ist die ItemLibraryController?

2. Warum erstellt templateUrl einen anderen Bereich für die ng-Modelle innerhalb der Vorlage?

3. Warum, wenn "Template" anstelle von "templateUrl" in der Definition der Direktive verwendet wird, verschwindet das ng-Modell Problem?

4. Wie kann ich auf TextComment zugreifen, ohne $ parent.textComment zu verwenden?

Answer 1

Das Problem dieses Problem zu lösen, würde Punktregel AngularJS , so that the object will for [**prototypal inheritance**][1]. For that you need to create and object and add the textkommentar in it, so the object will look like $ scope.library = {} then textkommentar will be placed in it. Also you need to make add Umfang werden: true` diese Richtlinie Vererbung folgt ein Objekt zu sagen.

Vorlage

... 
<textarea class="form-control textarea-resize" 
    ng-keyup="commentPost($event)" 
    ng-model="library.textComment"> 
</textarea> 
... 

Richtlinie

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