Question

我的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';
           });

Answer 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()' />

Answer 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;
        });
    }
}

从服务中提取项目。更新项目时，广播一个再次触发项目加载的事件。因此，在将新项目提交到服务后端之后，侧边栏将相应地更新。

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

2 个答案: