重复使用的NG-控制器单

我明白，NG-控制器创建控制器的新实例。我怎么能重复使用在不同的地方，我的模板的控制器，并保持相同的模型。重复使用的NG-控制器单

我尝试自己找出，但我在AngularJs是新的，有点失落......

见Plunker我的例子：http://plnkr.co/edit/VGLEcdlY4IaAJmJPWhQ7?p=preview

HTML

<body ng-app="app"> 
    <div ng-controller="test"> 
     <label ng-click="test()">Test: {{ name }}</label><br/> 
     <input type="text" ng-model="name" /> 
    </div> 
    <p>Here some other ng-controller...</p> 
    <div ng-controller="test"> 
     <label ng-click="test()">Test: {{ name }}</label><br/> 
     <input type="text" ng-model="name" /> 
    </div> 
</body>

的js

angular 
.module('app', []) 
.controller('test', function($scope) { 
    $scope.name = 'hello world'; 
    $scope.test = function(){ alert('alert'); }; 
})

的2个字段不连接到相同的模型/范围，如何使这个单身人士和两个输入都有相同的模型。

来源

2014-11-25 Alexandre

我有类似的情况太多了，我觉得你可以做的唯一的事情就是使用服务。

angular 
.module('app', []) 
.controller('test', function($scope, singleton) { 
    $scope.name = singleton.getField(); 


}).service('singleton', function(){ 
    var field = {value : 'hello world'}; 


    var getField = function(){ 
    return field; 
    } 

    return { 
    getField : getField 
    }; 

});

在这里，我用'field'作为对象，因为在这种情况下，您将链接到两个控制器中的同一个对象。

http://plnkr.co/edit/8yXY2qsIqcBtTqZDUxSa?p=preview

来源

2014-11-25 10:39:36 Rasalom

很高兴知道这种方法。谢谢:) – Asik 2014-11-25 10:45:40

此外这是一个很好的artical与angularjs codestyle相关，否则，可能会很有用：https：//github.com/johnpapa/angularjs-styleguide – Rasalom 2014-11-25 10:49:46

是的，我已经检查过..谢谢:) – Asik 2014-11-25 10:51:20

到目前为止，最简单的方法就是移动ng-controller属性到父元素：

<body ng-app="app" ng-controller="test"> 
    <div> 
     <label ng-click="test()">Test: {{ name }}</label><br/> 
     <input type="text" ng-model="name" /> 
    </div> 
    <p>Here some other ng-controller...</p> 
    <div> 
     <label ng-click="test()">Test: {{ name }}</label><br/> 
     <input type="text" ng-model="name" /> 
    </div> 
</body>

Updated Plunker

来源

2014-11-25 10:36:46

我应该指定，在我的情况下，这是不可能的，因为我几乎可以肯定有人会回答这个：p – Alexandre 2014-11-25 10:40:06

如果我whant使用CONTROLER作为单身我做一些这样的（这为我工作的角度1.4.3）

(function (app) { 
    var AbstractController = app.controllers.AbstractController; 
    MessageBoxController.static = { 
     options: AbstractController.static.createOptions([ 
      '$ionicSideMenuDelegate', 
      MessageBoxController 
     ]), 
     pluginFolderName: 'message_box', 
     hooks: [ 
      {hook: 'leftMenu', template: 'message_list.html'}, 
      {hook: 'topBarLeft', template: 'main.html'} 
     ] 
    }; 
    var instance; 
    function MessageBoxController() { 
     if(instance){ 
      return instance; 
     } 
     instance = this; 
     var mp = this; 
     mp.messagesNb = 0; 
     mp.test = 'blabla'; 
     extend(mp, new AbstractController()); 
     function _init(params) { 
      mp._parentInit(params, MessageBoxController.static.options); 
      mp.init(); 
     } 
     mp.init = function() { 
      mp.showMsgButton = false; 
      mp.toggleLeftMenu = mp.toggleLeftMenu; 
      mp.messages = {}; 
      mp.getMessageCSSClass = mp.getMessageCSSClass; 
      mp.clearMsg = mp.clearMsg; 
      mp.registerMessageWatching(); 
     }; 
     mp.registerMessageWatching = function() { 
      mp.unregisterWatchintInterval('MessageBoxController'); 
      var interval = setInterval(mp.checkMessages, 1000); 
      mp.registerWatchingInterval('MessageBoxController', interval); 
     }; 
     mp.checkMessages = function() { 
      var messages = mp.getAllMsgs(); 
      mp.messages = messages; 
      var messagesCount = messages.length; 
      if (mp.messagesNb === messagesCount) { 
       return; 
      } 
      if (messagesCount > 0) { 
       mp.$scope.$apply(function() { 
        mp.showMsgButton = true; 
       }); 
      } else { 
       mp.$scope.$apply(function() { 
        mp.showMsgButton = false; 
       }); 
      } 
      mp.messagesNb = messagesCount; 
     }; 
     mp.toggleLeftMenu = function() { 
      mp.$rootScope.$root.leftMenu = !mp.$rootScope.$root.leftMenu; 
      if(mp.$rootScope.$root.leftMenu){ 
       mp.$rootScope.buff.title = mp.$rootScope.$root.title; 
       mp.$rootScope.$root.title = app.l('Messages'); 
      }else{ 
       mp.$rootScope.$root.title = mp.$rootScope.buff.title; 
      } 
     }; 
     mp.getMessageCSSClass = function(type){ 
      switch(type){ 
       case app.messagesTypes.inform: 
        return 'confirm_msg'; 
        break; 
       case app.messagesTypes.error: 
        return 'error'; 
        break; 
       case app.messagesTypes.warning: 
        return 'warning'; 
        break; 
      } 
     }; 
     mp.clearMsg = function(key){ 
      mp.messages.splice(key, 1); 
      mp.messagesNb--; 
      if(mp.messagesNb < 1){ 
       mp.$rootScope.$root.leftMenu = false; 
       mp.$rootScope.$root.title = mp.$rootScope.buff.title; 
      } 
     }; 
     _init(arguments); 
    } 
    app.controllers.MessageBoxController = MessageBoxController; 
})(deliveryManagerGlobal);

而且在模板写这样

<div ng-controller="MessageBoxController as msgBox" class="msg_box"> 
    <div class="card" ng-repeat="(key, message) in msgBox.messages"> 
     <div class="item item-text-wrap" ng-class="msgBox.getMessageCSSClass(message.type)"> 
      {{message.context}} 
     </div> 
     <div class="close ion-android-close" ng-click="msgBox.clearMsg(key)"></div> 
    </div> 
</div>

如果你会写这样你不使用$范围（角被创建为每个NG-控制器新的范围），你可以使用singelton。 SOU你可以用相同的NG-控制器=“MessageBoxController为MSGBOX”添加新的DOM元素，它会使用你的上一个实例。目前我的应用程序结构中没有看到附带的错误。我已经使用dinamic hooks managmet，所以我需要单身人士，并且这项工作对我来说很好

来源

2015-10-07 18:24:31 webmak10

仔细想想你在这里做什么。控制器不应该保持状态。它应该是可重复和无状态的。如果你想坚持状态，我建议你使用服务。服务是按设计单身。

来源

2015-10-07 18:33:30 hally9k

重复使用的NG-控制器单

回答

相关问题