Question

这是一个没有功能的Plunkr及相关代码： http://plnkr.co/edit/cM67vJaL0gjma0SoPbK2?p=info

为什么“pullThirdPartyCollection.html”模板的范围与pullThirdPartyCollection指令的链接功能不同？我必须使用ng-model =“$ parent。$ parent.bggUsername”来确保双向绑定正确发生。否则，scope.bggUsername在链接函数的scope.pullCollection函数中为null。

如果我在链接函数中设置了一个初始值：scope.bggUsername ='test'，那么该初始值将显示在屏幕上。即使我在输入框中更改了值，并且我旁边有一个输出值{{bggUsername}，该值也会发生变化。但是，当我单击搜索按钮和pullCollection函数时，在链接函数内部调用，链接函数内的范围没有我期望的bggUsername值。

另外，pullThirdPartyCollection链接函数的作用域的$ id是20.当我在模板pullThirdPartyCollection.html.js中打印$ id的值时，$ id的值为33.这就是我想出的我可以改变的通过在模板中调用$ parent。$ parent.bggUsername来链接函数bggUsername。尽管如此，模板和链接函数有两个不同的范围仍然没有意义。我有什么想法我做错了吗？

以下是一些基本设置

<div paginated-search query="query" total-items="totalItems" current-page="currentPage" items-per-page="itemsPerPage" search-on-load="searchOnLoad" urls="urls" select-item="selectItem(item)" get-search-types="getSearchTypes()" show-search-types="showSearchTypes" selected-search-type="selectedSearchType" edit-item="editItem(e,id)" search-button-id="search-items-button">
                    <div pull-third-party-collection ></div>
</div>

pullThirdPartyCollection指令：

angular.module('directives.pullThirdPartyCollection', [])
    .directive('pullThirdPartyCollection', function($q, urls, KeyCloakService) {
        return {
            require: '^paginatedSearch',
            restrict: 'EAC',
            templateUrl: 'pullThirdPartyCollection.html',
            scope:{

        },
        link: function postLink(scope, element, attrs, paginatedSearchCtrl) {

            scope.pullCollection = function(e) {

                var deferred = $q.defer();
                $(e.currentTarget).button('loading');
                KeyCloakService.makeRequest(urls.collectionserviceurl + '/pulldata/bgg?username=' + scope.bggUsername + '&collectiontype=trade&urltype=all&subject=' + KeyCloakService.auth.subject,
                    null,
                    function(data) {
                        $(e.currentTarget).button('reset');
                        scope.pulled = true;
                        paginatedSearchCtrl.searchItems();
                        deferred.resolve();
                    },
                    null,
                    'application/json',
                    'application/json',
                    'GET');
                return deferred.promise;
            };

            scope.toggleAllow = function(){
                scope.allow = !scope.allow;
            };
        }
    };
});

Answer 1

stackoverflow中的现有条目使我朝着正确的方向前进：Two way binding not working in directive with transcluded scope。我知道AngularJS倾向于为transcluded指令创建子范围。我只是没有意识到它可以在模板和链接功能之间创建不同的范围。子范围的bggUsername最初从父级接收其值。之后，将创建卷影副本，并且不再与父卷同步。显然，解决方案是仅绑定对象。从文档中：每个ng模型应该有一个“。”在里面。我将绑定属性从基元更改为对象，并且对象在链接函数内保持同步。因此，解决方案是使bggUsername成为对象，将ng-model =“bggUsername”更改为ng-model =“bggUsername.value”。

子指令中的模板与子指令的链接函数具有不同的范围

1 个答案: