2014-08-27 53 views
0

這是一個有點複雜的問題來解釋,所以請耐心等待!組織一個複雜的AngularJs應用程序;控制器或服務?

我正在構建一個應用程序,它繼承用戶交互(大量事件,點擊......)在iframe的DOM上創建html元素(駐留在同一個域中)。

Sketch

<div ng-controller="mainCTRL"> 
    <ul ng-controller="btnCTRL"> 
     <li ng-repeat="tool in tools"> 
      <a href="#" ng-click="toolClicked($index)">{{tool.text}}</a> 
     </li> 
    </ul> 
    <iframe src="same-domain/iframe.html"> 
     <p>Sorry but your browser does not support iframes!</p> 
    </iframe> 
</div> 

我試圖遵循的最佳做法,就像我可以,但有在這個項目上的服務和控制器的概念的問題;在iframe中,我不想放置任何angularjs指令或代碼。把它看作是我用來「接收」我從主控制器生成的代碼的畫布。

現在,當點擊BTN工具它將調用btnCTRL一個函數,這個函數裏面我打電話的工具工廠,最後調用當前點擊工具的初始化函數裏面的函數:

爲什麼我選擇了嗎?因爲它讓我可以更好地將我的應用程序組織成小塊模塊。

btnCTRL.js

$scope.toolClicked = function($index) { 
    // Launch the ignit function in the main tool factory 
    ToolsFactory.ignit(config); 
}; 

tools.js

angular.module('myApp') 
    .factory('ToolsFactory', ['Tool1Factory', 'Tool2Factory', 'Tool3Factory', 
     function(Tool1Factory, Tool2Factory, Tool3Factory) { 
      var toolsAsFactory = { 
       't1': Tool1Factory, 
       't2': Tool2Factory, 
       't3': Tool3Factory 
      }; 
      var ignit = function($config) { 
       // Some code to set current clicked tool 
       // ... 

       // Call the init function on the selected tool 
       toolsAsFactory[config.selectedTool].init(config); 
      }; 

      return { 
       ignit: ignit 
      }; 
     } 
    ]); 

tools_1.js

angular.module('Tools') 
    .factory('Tool1Factory', function() { 

     var init = function($config) { 
      // Now adds the html to the iframe! 
      //... 

     }; 

     return { 
      init: init 
     }; 
    }); 

所以..問題:由於我的iframe不應該不包含角碼..這是一個很好的方法來建立這樣的應用程序?當涉及重大事件管理的應用程序時,角度是最好的選擇嗎?

回答

相關問題