Question

我有这样的标记：

<ul>
    <li data-ng-controller="TileController">
        <h1>Title</h1>
        <span>
            <a href="#" data-ng-click="loadBeanForEdit()">
        </span>
        ....
        <div id="beanEditModal" data-ng-controller="TileBeanController">
            <!-- Bootstrap modal -->
        </div>
    </li>
    <li>
        ...
    </li>
    ...
</ul>

工作流程是：用户点击a，我想用ajax加载一些数据，以便在弹出窗口中进行编辑：

function TileController($scope) {
    $scope.loadBeanForEdit= function(e) {
        e.stopPropagation();
        $("#beanEditModal").modal();
    };
}

问题是我不想将数据保存在父范围内（TileController）我想将其加载到TileBeanController范围内。但是我怎么能从父控制器那里做到呢？或者，也许有更好的方法？

Answer 1

通常，您需要创建一个服务，以便您的两个控制器可以进行通信。我要做的是像这样扩展loadBeanForEdit函数

function TileController($scope, News) {
    $scope.loadBeanForEdit= function(e) {
        e.stopPropagation();
        News.setModal(some-id-or-whatever);
        $("#beanEditModal").modal();
    };
}

因此，此函数调用一个服务，通知所有正在监听模式已被打开的人。您的服务可能如下所示：

angular.factory('News', function($rootScope) {
    var news = {};

    // Sets and broadcasts that a modal has been opened
    news.setModal = function( id ) {
        this.modal = id;
        $rootScope.$broadcast('modal');
    };
});

现在你需要做的就是在你的TileBeanController中监听什么东西，如下所示：

function TileBeanController($scope, News) {
    $scope.$on('modal', function() {
        // Load data
    });
}

我希望有帮助：）

Answer 2

如果您需要元素的作用域，我会将其包装在具有隔离范围的指令中：

myApp.directive('tilebean', function () {
    return {
        restrict : 'E',
        scope: {
            data: '='
        },
        template: '<div id="beanEditModal"><!-- Bootstrap modal -->This is your title: {{data.title}}</div>'
    };
});

然后，您可以在视图中绑定此数据参数：

<ul>
    <li data-ng-controller="TileController">
        <h1>Title</h1>
        <span>
            <a href="#" data-ng-click="loadBeanForEdit()">
        </span>
        ....
        <tilebean ng-model="data"></tilebean>
    </li>
    <li>
        ...
    </li>
    ...
</ul>

并填充控制器中的数据：

function TileController($scope) {
    $scope.loadBeanForEdit= function(e) {
        e.stopPropagation();
        $("#beanEditModal").modal();
        $scope.data = getDataFromAjax();//replace this for your ajax call
    };
}

如何在Angular范围之间管理数据？

2 个答案: