jquery - 如何管理 Angular 范围之间的数据？

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 范围中。但我怎样才能从父 Controller 做到这一点呢？或者，也许有更好的方法？

Answer 1

通常，您需要创建一个服务，以便两个 Controller 可以进行通信。我要做的就是像这样扩展 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
    });
}

希望有帮助:)