Angular指令控制器作用域繼承

Question

讓我們從一些代碼開始

HTML：

<rd-search-set type="'ActiveProfileContact'">
    <form class="navbar-form navbar-static-top" role="search">
        <rds-input />
    </form>
</rd-search-set>

rds輸入模板：

<div class="input-group rd-search-wrap">
<div class="input-group-addon">
    <i class="fa fa-search"></i>
</div>
<input type="text" value="" class="form-control" placeholder="{{'FIND_CONTACT' | translate | capitalize}}..." ng-modal="src.value" />
<div class="rd-search-state">
    <i class="fa spin2D fa-spinner" ng-if="src.isBusy"></i>
    <span class="text-muted rd-search-result" ng-if="!src.isBusy">{{src.amountString}}</span>
</div>

Javascript / AngularJs：

angular
    .module("App")
    .directive("rdSearchSet", rdSearchSet)
    .directive("rdsInput", rdsInput);

function rdSearchSet() {
    var directive = {
        restrict: 'E',
        scope: {
            onSearch: "=onSearch",
            searchForType: "=type",
            relatedGuids: "=rdSearchRelatedGuids",
            searchEventType: "=rdSearchEventType",
        },
        controller: "SearchController",
        controllerAs: "src",
        bindToController: true,
        replace: false,
    };

    return directive;
}

rdsInput.$inject = ["rdBaseUrl"];
function rdsInput(rdBaseUrl) {
    var directive = {
        restrict: 'E',
        replace: true,
        templateUrl: rdBaseUrl + "Partials/Directives/Search/rdsInput.html",
        require: "^rdSearchSet",
        transclude: true,
        scope: false,
    };

    return directive;
}

問題

我在rdSearchSet指令的控制器上獲取/設置數據時遇到很多麻煩。 我嘗試的最后一件事是將rdsInput指令scope屬性設置為false，希望我可以使用rdSearchSet的controllerAs: "src"屬性訪問父范圍值。

簡而言之，我的問題是：盡可能透明地訪問父指令的controller（as）范圍的最佳方法是什么？ 就像，使用一種指令來加載html並綁定到父指令范圍屬性，兩種方式都可以。

編輯：
我已經將rdSearchSet指令html移到了看起來像這樣的模板中：

<form class="navbar-form navbar-static-top navbar-royal" role="search">
    <rds-input />
</form>
<rds-list />

rdSearchSet.$inject = ["rdBaseUrl"];
    function rdSearchSet(rdBaseUrl) {
        var directive = {
            restrict: 'E',
            scope: {
                onSearch: "=onSearch",
                searchForType: "=type",
                relatedGuids: "=rdSearchRelatedGuids",
                searchEventType: "=rdSearchEventType",
            },
            templateUrl: rdBaseUrl + "Partials/Directives/Search/rdsSearchSet.html",
            controller: "SearchController",
            controllerAs: "src",
            bindToController: true,
            replace: false,
        };

        return directive;
    }

仍然存在的問題是我無法使用ControllerAs前綴。 rdsInput的文本輸入字段使用ng-model="src.value"但該值未在rdSearchSet的Controller中設置。

Answer 1

有兩個問題...一個是ng-model的簡單拼寫錯誤，而您有ng-modal 。

另一個是隔離范圍，僅當您使用模板時才起作用，它不適用於該元素中的現有html。

如果將<form>移至模板，則代碼將起作用

<rd-search-set></rd-search-set>

JS

function rdSearchSet() {
    var directive = {
        restrict: 'E',
        templateUrl:'search.html',
        scope: {
            .....,
        },
        controller: "SearchController",
        controllerAs: "src"
    };

    return directive;
}

演示