AngularJS多用途控制器和rootScope [英] AngularJS multiple uses of Controller and rootScope

问题描述

我想在2个分隔的HTML元素上使用一个控制器，并且使用$ rootScope在编辑编辑时保持两个列表同步：

HTML

 < ul class =navng-controller =Menu> 
< li ng-repeat =菜单中的项> 
< a href ={{item.href}}> {{item.title}}< / a> 
< / li> 
< / ul> 
 
< divng-controller =菜单> 
< input type =textid =newItemvalue =/> 
< input type =submitng-click =addItem（）/> 
< ul class =navng-controller =菜单> 
< li ng-repeat =菜单中的项> 
< a href ={{item.href}}> {{item.title}}< / a> 
< / li> 
< / ul> 
< / div> 
  

JS

  angular.module（'menuApp'，['menuServices']）。 
 run（function（$ rootScope）{
 $ rootScope.menu = []; 
}）; 
 
 angular.module（'menuServices'，['ngResource']）。 
 factory（'MenuData'，function（$ resource）{
 return $ resource（
'/tool/menu.cfc'，
 {
 returnFormat：'json '
}，
 {
 getMenu：{
 method：'GET'，
 params：{method：'getMenu'} 
}，
 addItem：{
 method：'GET'，
 params：{method：'addItem'} 
} 
} 
）; 
}） ; 
 
函数菜单（$ scope，MenuData）{
 
 //尝试添加新项
 $ scope.addNewItem = function（）{
 var thisItem = $（'＃newItem'）。val（）; 
 
 MenuData.addItem（{item：thisItem}，function（data）{
 $ scope.updateMenu（）; 
}）; 
} 
 
 $ scope.updateMenu = function（）{
 MenuData.getMenu（{}，function（data）{
 $ scope.menu = data.MENU ; 
}）; 
} 
 
 //获取菜单数据
 $ scope.updateMenu（）; 
} 
  

当页面加载时， UL 和 DIV 从数据库显示正确的内容，但是当我使用 addNewItem（）方法只有 DIV 获得更新。

有没有更好的方法来构建我的逻辑，或者我可以做某事以确保 UL 中的 $ scope.menu 同时更新？

以下是类似的示例： http://plnkr.co/edit/2a55gq

解决方案

我建议使用一个包含菜单及其方法的服务。该服务将更新由控制器引用的菜单。

请在这里查看一个工作的空间： http://plnkr.co/edit/Bzjruq

这是示例JavaScript代码：

  angular 
 .module（'sampleApp'，[]）
 .service（'MenuService'，['$ rootScope'，函数（$ rootScope）{
 
 return {
 menu：['item 1']，
 add：function（item）{
 this.menu .push（item）; 
} 
}; 
 
}] 
 .controller（'ControllerA'，['MenuService'，'$ scope' （MenuService，$ scope）{
 
 $ scope.menu = MenuService.menu; 
 
 $ scope.addItem = function（）{
 MenuService.add（$ scope.newItem）; 
}; 
 
}]）; 
  

和示例Html页面：

 <！DOCTYPE html> 
< html> 
 
< head lang =en> 
< meta charset =utf-8> 
< title> Custom Plunker< / title> 
< script src =// ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js\"></script> 
< script src =app.js>< / script> 
< / head> 
 
< body ng-app =sampleApp> 
 
< divng-controller =ControllerA> 
< ul> 
< li ng-repeat =菜单项> {{item}}< / li> 
< / ul> 
< input type =textng-model =newItem/>< input type =submitng-click =addItem（）/> 
< / div> 
 
< divng-controller =ControllerA> 
< ul> 
< li ng-repeat =菜单项> {{item}}< / li> 
< / ul> 
< / div> 
 
< / body> 
 
< / html> 
  

I want to use a controller on 2 seperated HTML elements, and use the $rootScope to keep the 2 lists in sync when one is edited:

HTML

<ul class="nav" ng-controller="Menu">
    <li ng-repeat="item in menu">
        <a href="{{item.href}}">{{item.title}}</a>
    </li>
</ul>

<div ng-controller="Menu">
    <input type="text" id="newItem" value="" />
    <input type="submit" ng-click="addItem()" />
    <ul class="nav" ng-controller="Menu">
        <li ng-repeat="item in menu">
            <a href="{{item.href}}">{{item.title}}</a>
        </li>
    </ul>    
</div>

JS

angular.module('menuApp', ['menuServices']).
    run(function($rootScope){
        $rootScope.menu = [];
    });

angular.module('menuServices', ['ngResource']).
    factory('MenuData', function ($resource) {
        return $resource(
            '/tool/menu.cfc', 
            {
                returnFormat: 'json'
            },
            {
                getMenu: {
                    method: 'GET',
                    params: {method: 'getMenu'}
                },
                addItem: {
                    method: 'GET',
                    params: {method: 'addItem'}
                }
            }
        );
    });

function Menu($scope, MenuData) {

    // attempt to add new item
    $scope.addNewItem = function(){
        var thisItem = $('#newItem').val();

        MenuData.addItem({item: thisItem},function(data){
            $scope.updateMenu();
        });
    }   

    $scope.updateMenu = function() {
        MenuData.getMenu({},function(data){
            $scope.menu = data.MENU;
        });         
    }

    // get menu data
    $scope.updateMenu();
}

When the page loads, both the UL and the DIV display the correct contents from the database, but when i use the addNewItem() method only the DIV gets updated.

Is there a better way to structure my logic, or can I do something to make sure the $scope.menu in the UL gets updated at the same time?

Here's an example of something similar: http://plnkr.co/edit/2a55gq

解决方案

I would suggest to use a service that holds the menu and its methods. The service will update the menu which is referenced by the controller(s).

See a working plunker here: http://plnkr.co/edit/Bzjruq

This is the sample JavaScript code:

angular
 .module( 'sampleApp', [] )
 .service( 'MenuService', [ '$rootScope', function( $rootScope ) {

   return {
      menu: [ 'item 1' ],
      add: function( item ) {
        this.menu.push( item );
      } 
   };

 }])
 .controller( 'ControllerA', [ 'MenuService', '$scope', function( MenuService, $scope ) {

   $scope.menu = MenuService.menu;

   $scope.addItem = function() {
    MenuService.add( $scope.newItem );  
   };

 }]);

And the sample Html page:

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="sampleApp">

    <div ng-controller="ControllerA">
      <ul>
        <li ng-repeat="item in menu">{{item}}</li>
      </ul>
      <input type="text" ng-model="newItem" /><input type="submit" ng-click="addItem()" />
    </div>

    <div ng-controller="ControllerA">
      <ul>
        <li ng-repeat="item in menu">{{item}}</li>
      </ul>
    </div>

  </body>

</html>

这篇关于AngularJS多用途控制器和rootScope的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！