ng-controller를 싱글 톤으로 다시 사용했습니다.

저는 ng-controller가 컨트롤러의 새로운 인스턴스를 생성한다는 것을 알고 있습니다. 템플릿의 다른 위치에서 컨트롤러를 재사용하고 동일한 모델을 유지하는 방법은 무엇입니까?ng-controller를 싱글 톤으로 다시 사용했습니다.

나 자신에 의해 발견하려고 노력하지만 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>

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

});

여기서는 객체로 '필드'를 사용했습니다.이 경우 두 컨트롤러에서 동일한 객체에 대한 링크가 있기 때문입니다. 난 싱글로 CONTROLER를 사용하는 whant 경우

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

출처

2014-11-25 10:39:36 Rasalom

이 방법을 알고 있으면 다행이다. 고마워요 :) – Asik

또한 이것은 anglejs codestyle과 관련된 좋은 교묘하고 유용한 것입니다 : https://github.com/johnpapa/angularjs-styleguide – Rasalom

그래, 나는 그것을 이미 검토했다. ..thanks :) – Asik

는 지금까지 가장 간단한 방법은 부모 요소에 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

나는이

<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>

같은이 같은 일부 (각 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);

그리고 템플릿 쓰기에 할

이렇게 쓰려면 $ scope (모든 ng 컨트롤러의 새로운 범위에 각도가 생성됨)을 사용하지 말고 singelton을 사용할 수 있습니다. 같은 ng-controller = "MessageBoxController msgBox"를 사용하여 새 DOM 요소를 추가 할 수 있으며 이전 인스턴스를 사용하게됩니다. 현재로서는 앱 구조에 부수적 인 버그가 없습니다. 나는 디나믹 훅 마나멧을 사용했기 때문에 싱글 톤이 필요했고이 작품은 나에게 좋은 것이었다.

출처

2015-10-07 18:24:31 webmak10

여기서 무엇을하고 있는지 신중하게 생각해라. 컨트롤러는 상태를 유지하면 안됩니다. 반복 가능하고 무국적이어야합니다. 상태를 유지하려면 서비스를 사용하는 것이 좋습니다. 서비스는 의도적으로 싱글 톤입니다.

출처

2015-10-07 18:33:30 hally9k

ng-controller를 싱글 톤으로 다시 사용했습니다.

답변

관련 문제