AngularJS mẫu vs templateURL trong chỉ thị

Question

Tôi đã một chỉ thị được định nghĩa như thế này:

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

Mẫu theo quy định của "templateUrl" lợi nhuận một cái gì đó như thế này:

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

Trong ItemLibraryController tôi đã xác định phương pháp commentPost () được truy cập trên keyup trên textarea. Vấn đề là $scope.textComment = undefined thay vì giá trị được nhập trong vùng văn bản. Nếu tôi sửa đổi trong html ng-model="$parent.textComment" thì giá trị từ vùng văn bản được tìm thấy trong $scope.textComment.

PS. Khi sử dụng "template" thay vì "templateUrl" trong định nghĩa chỉ thị, vấn đề ng-model biến mất.

Câu hỏi của tôi là:

1. Tại sao tôi phải sử dụng $ parent.textComment từ phạm vi của mẫu là ItemLibraryController?

2. Tại sao sử dụng templateUrl tạo một phạm vi khác cho các mô hình ng bên trong mẫu?

3. Tại sao, khi sử dụng "mẫu" thay vì "templateUrl" trong định nghĩa chỉ thị, vấn đề ng-model biến mất?

4. Tôi làm cách nào để có thể truy cập vào tính năng nhận dạng văn bản mà không cần sử dụng $ parent.textComment?

Answer 1

Vấn đề để giải quyết vấn đề này sẽ được sử dụng dot cai trị của 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 phạm vi: true` nói chỉ thị rằng sẽ làm theo thừa kế của một đối tượng.

Template

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

Chỉ

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