Javascript 指令中的AngularJS模板与templateURL

我有一个如下定义的指令：

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

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

“templateUrl”

指定的模板返回如下内容：

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

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

。。。
...

在ItemLibraryController中，我定义了通过keyup on textarea访问的方法commentPost（）。 问题是

$scope.textcoment=undefined

而不是在textarea中输入的值。如果我在html

ng model=“$parent.textcoment”

中进行修改，则可以在

$scope.textcoment

中找到textarea中的值

当在指令定义中使用“模板”而不是“模板URL”时，ng模型问题消失

我的问题是：

既然模板的作用域是ItemLibraryController，为什么我必须使用$parent.textComment

为什么使用templateUrl会在模板内为ng模型创建另一个作用域

为什么在指令定义中使用“模板”而不是“模板URL”时，ng模型问题消失了

如何在不使用$parent.textcoment的情况下访问textcoment

---

解决这个问题的问题是使用AngularJS

的点规则，这样对象将用于[**原型继承**][1]。为此，您需要创建和对象，并在其中添加

textcoment

，这样对象看起来就像

$scope.library={}

，然后将

textcoment

放在其中。此外，您还需要将add

scope:true`设置为表示该指令将遵循对象的继承

模板

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

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

。。。
...

指令

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

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

app.directive（'itemComments'，['ajax'，函数（ajax）{
返回{
scope:true，//您是如何使用
$scope.textcoment
或
this.textcoment
在父作用域中定义
textcoment
的值的？我使用$scope.textcomenthmm..我在指令的“link”方法中创建了一个类似scope.library={textcoment:'}的本地对象，然后使用ng model=“library.textcoment”它在指令中没有使用“scope:true”的情况下工作。因此，我将这个答案标记为已接受，因为它将我推向了正确的道路。