Question

让我们从一些代码开始

HTML：

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

rds-input模板：

<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指令范围属性设置为false，希望我可以使用controllerAs: "src" rdSearchSet属性访问父范围值。

我的问题简而言之：访问父指令的控制器（as）范围尽可能透明的最佳方法是什么？比如，使用Directive加载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的控制器中未设置值。

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

的 DEMO

Angular指令控制器范围继承

1 个答案: