2

我有这样的标记：

<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作用域中。但是我怎么能从父控制器做呢？或者，也许有更好的方法？

4

2 回答 2

4

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

我希望这会有所帮助:)

于 2013-03-11T10:36:04.113 回答
3

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

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
    };
}
于 2013-03-11T10:38:12.073 回答