Angular：在 CRUD 事件上更新 ng-include答案

【问题标题】：Angular: update ng-include on CRUD eventAngular：在 CRUD 事件上更新 ng-include
【发布时间】：2014-10-28 12:43:03
【问题描述】：

我的 index.html 文件中有一个常量侧边栏，用于列出使用 ng-include 的项目。创建或更新项目等时。我希望侧边栏自动更新。我不确定要提供我的代码的哪一部分，因为希望这是一个很容易回答的基本问题，尽管我没有找到解决方案。

编辑：感觉我快到了，但 src 似乎没有拿起控制器属性：

<div class="col col-md-4" data-ng-controller="ProjectsController" data-ng-include src="'{{sidebarUrl}}'"></div>

在我的项目控制器中：

// Update existing Project
    $scope.update = function() {
        var project = $scope.project ;

        project.$update(function() {
            $location.path('projects/' + project._id);
                            $scope.$broadcast('projectUpdated');
        }, function(errorResponse) {
            $scope.error = errorResponse.data.message;
        });
    };

$scope.sidebarUrl = 'modules/projects/views/list-projects.client.view.html';

            $scope.$on("projectUpdated",function(event,args) {
                $scope.sidebarUrl=null;
                $scope.sidebarUrl= 'modules/projects/views/list-projects.client.view.html';
           });

【问题讨论】：

ngInclude 是否有一个包含项目列表的控制器？
尝试关注此stackoverflow.com/questions/19203777/…，但很难让控制器属性获取包含的 src。将更新问题。
@Chris - 问题是 URL 实际上并没有改变。 Angular 不在乎您将其设置为 null 然后再返回。如果$digest循环运行完后，旧值和新值不同，则不会更新。

标签： angularjs angularjs-ng-include

【解决方案1】：

这就是服务是您的朋友的地方。您应该首先将 CRUD 操作封装到服务中。

function MyCrudService($http, ...){ ... }

angular.module('my-app')
  .service('myCrudService', MyCrudService);

现在，您可以通过多种方式实现更新。

使用$rootScope 并广播一条消息，说明发生了一些变化，并在您的侧边栏控制器中监听该事件（假设您有一个）。

//Inside your service
function updateProject(proj){
   //Update project
   $rootScope.$broadcast('project-updated', proj);
}

//Inside your controller
function MySidebarController($scope){
   $scope.$on('project-updated', function(){ ... });
}

将事件逻辑封装在您的服务中以避免使用$rootScope。只需维护您自己的回调列表并执行它们。

//Inside your controller
function MySidebarController(myCrudService){
   myCrudService.onProjectChanged(function(){ ... });
}

在您的服务上公开可以数据绑定的共享数据。

//Inside your controller
function MySidebarController($scope, myCrudService){
  $scope.projects = myCrudService.projects;
}

就我个人而言，我尽量避免在我的控制器中使用$scope，但将它用于事件处理是可以的。不过，我可能会编写某种指令，允许我在触发事件时执行表达式以避免它。

<my-event-binding event='project-updated' expression='sideBar.updateProjects()' />

【讨论】：

这让我有点不知所措......我对 Angular 很陌生，但我会看看我是否可以让它工作 - 谢谢！

【解决方案2】：

好的，所以我有相同的要求（在包含的侧面板中动态更改菜单项）我所做的是在 ng-include 模板中使用控制器。然后，模板将从服务中获取相关菜单项并更新控制器。该视图有一个 ng-repeat 指令来显示所有菜单项（在您的情况下为项目）。

<div ng-controller="ProjectsCtrl">
    <ul>
        <li ng-repeat="project in projects">
            <a ng-href="project.url">
                {{project.name}}
            </a>
        </li>
    </ul>
</div>

控制器函数可能类似于：

function($scope, projectsSvc){
    $scope.projects = [];

    loadProjects();
    $scope.$on("updatedProjects", loadProjects);

    function loadProjects(){
        projectsSvc.getProjects.success(function(projects){
            $scope.projects = projects;
        });
    }
}

项目是从服务中获取的。当您更新项目时，广播一个再次触发项目加载的事件。所以在新项目提交到服务后端后，侧边栏会相应更新。

【讨论】：