重複使用的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-控制器單

回答

相關問題