如何在angularjs中正确使用局部视图和模式

Question

我刚接触angularjs，所以可能我没有正确地使用一些东西，请指导我正确的方法。

所以这是我的场景：

我有两个对象Books和author，我为这两个对象编写了单独的控制器，具有CRUD操作和每个操作的不同视图，它们都工作得很好。

在作者的“add”视图中，有一个Books的选择框，这样用户就可以选择一本书并添加新的作者，并将该作者与所选的书相关联。

现在的问题是，我需要在作者的“添加”视图中添加“添加新书”按钮，这将在模式中打开图书的“添加”视图，以便用户可以添加新书，这将自动添加到作者的“添加”表单的选择框中并得到选择。

因为我已经为Book的CRUD创建了控制器、操作和视图，所以我想重用Book的“添加”操作和视图。

在互联网上搜索时，我遇到了“Angularjs ui bootstrap”，我决定使用它，为了实现它，我为Book的Add view创建了局部视图。

下面是我的实现：

Controllers.js：

myapp.controller('AuthorController', ['$scope',. . .,'$uibModal',
 function ($scope,. . ,$uibModal) {
$scope.open = function (size) {

        var modalInstance = $uibModal.open({
          animation: $scope.animationsEnabled,
          templateUrl: 'myModalContent.html',
          controller:’BookController’,
          size: size,

        });
    }
});

BookController：

$scope.AddNew=function(){
        if($scope.book.id>0){
            Book.update({id:$scope.book.id},$scope.book,function(data){
                $location.path('/books');
        });
        }
        else{
            Book.save($scope.book,function(data){
                $location.path('/books');
            });
        }
    };

作者添加视图：

<button class="btn btn-info create" ng-click="open()">
    <i class="fa fa-plus"></i> Add a new Book</button>
<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <div ng-include src="'./resources/views/Book/_details.html'">
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="AddNew()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>

这段代码通过调用图书的“AddNew”函数来添加新书，该函数添加新书并重定向到图书列表，但在从作者的控制器调用时，我需要它只添加新书，并让AuthorController知道新书已添加，并返回新书的id。

如何让AuthorController了解新书？

请给我引路。

谢谢。

Answer 1

您的BookController需要通过关闭$uibModalInstance返回到AuthorController，如下所示：

$scope.AddNew=function(){
    var isNew;
    if($scope.book.id>0){
        Book.update({id:$scope.book.id},$scope.book,function(data){
            isNew = false;
    });
    }
    else{
        Book.save($scope.book,function(data){
            isNew = true;
        });
    $uibModalInstance.close({bookId: $scope.book.id, isNew: isNew}); 
    }
};

然后，您的AuthorController将像这样处理返回：

modalInstance.result.then(function(result) { 
    if(result.isNew){
                // stay here
            }else{
                // redirect to book                    
            }
}); 

Answer 2

您可以广播事件(或使用自定义工厂生成图书)

在BookController中：

$rootScope.$broadcast("newBook", book.id);

在AuthorController中：

$rootScope.$on("newBook", function(event, bookId){
    //do something
});

别忘了：包含$rootScope