AngularJS vs TemplateURL nella direttiva

Question

ho una direttiva definita in questo modo:

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

Il modello specificato dal "templateUrl" restituisce qualcosa di simile:

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

In ItemLibraryController ho definito il metodo commentPost () a cui si accede tramite keyup su textarea. Il problema è che $scope.textComment = undefined invece del valore inserito nella textarea. Se modifico in html ng-model="$parent.textComment", il valore dalla textarea si trova in $scope.textComment.

PS. Quando si utilizza "template" anziché "templateUrl" nella definizione della direttiva, il problema del modello ng scompare.

Le mie domande sono:

1. Perché devo usare $ parent.textComment dal momento che il campo di applicazione del modello è l'ItemLibraryController?

2. Perché utilizzare templateUrl crea un altro ambito per i modelli di ng all'interno del modello?

3. Perché, quando si utilizza "modello" anziché "templateUrl" nella definizione direttiva, il problema del modello ng scompare?

4. Come posso accedere a textComment senza utilizzare $ parent.textComment?

Answer 1

Il problema per risolvere questo problema sarebbe utilizzando regola punto di AngularJS , 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 portata: true` per dire che la direttiva seguirà l'eredità di un oggetto.

Template

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

direttiva

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