angularjs應用程序的基本行爲和結構

儘管我已經完成了教程並觀看了基本的建築視頻，但我仍然在努力處理大體積應用程序的行爲和體系結構。

我的應用程序有一個包含添加按鈕的菜單欄。如果用戶點擊按鈕，我想要一個對話框彈出。該對話框不是菜單的一部分：

<!-- The menu --> 
<header class="mod modHeader" ng-controller="HeaderCtrl"> 
    <div class="modHeader__addProject" ng-click="openAddDialog()"> 
    <i class="icon-plus icon-2x"></i> 
    </div> 
</header> 

<!-- the dialog --> 
<div class="modNewProject" ng-show="properties.AddDialogVisibility" ng-controller="HeaderCtrl"> 
    <!-- content stripped out --> 
</div>

我的目的是要創造我HeaderCtrl控制的範圍內properties對象，然後在該按鈕的點擊改變一個布爾值。

// HeaderCtrl 
function HeaderCtrl($scope){ 
    $scope.properties = { 
    "AddDialogVisibility": false 
    }; 

    $scope.openAddDialog = function() { 
    $scope.properties.AddDialogVisibility = true; 
    }; 

}

現在，有多個問題和疑問：

我要HeaderCtrl適用於我的對話，以獲得訪問對象的屬性。這對我來說很討厭，HeaderCtrl應該只控制我的頭文件模塊，不是嗎？
該對話框不會在點擊時顯示。我發現這是因爲該屬性在頁面加載時只被檢查一次，而且我將不得不使用一個函數。什麼是實現我的目標的正確方法？

結論：

我要說的是，我到可以總結我的問題：
我用一個控制器爲我的網頁的每個部分。他們如何交流？

來源

2013-06-22 Sprottenwels

有沒有AngularJS標籤，因爲這是programmers.SE，不StackOverflow上。我已將此問題標記爲遷移到該社區。 –

此外 - 你的問題是你使用同一個控制器的兩個實例，這意味着他們有兩個不同的範圍。他們不交流。我建議使用單個ng控制器來封裝標題和對話框。 –

在您提供的示例代碼中，將創建兩個HeaderCtrls。每次使用ng-controller都會創建一個控制器。

要在Angular中共享數據，請使用service。注入，該服務在需要的地方–到控制器，指示等

在設計的角度應用程序，儘量想在車型方面（這往往包含在服務，然後將這些服務expose model APIs到應用程序的其餘部分）和意見。控制器只是讓我們將模型的相關部分投影到視圖中的粘合劑。

自從they don't take up a specific place in the rest of the application以來，對話框是一個特殊/獨特的案例。聽取關於這個問題的a few minutes of Misko。我還建議在尋找如何角UI團隊實現的對話框：http://angular-ui.github.io/bootstrap/#dialog

來源

2013-06-24 17:44:36

非常感謝:) – Sprottenwels

我擡頭看看服務的東西，發現有服務，工廠和提供商。我瞭解他們在功能上彼此不同，而且服務可能是最容易使用的。但是，我如何決定選擇哪一個？ – Sprottenwels

@Sprottenwels，請參閱http://stackoverflow.com/questions/15666048/angular-js-service-vs-provide-vs-factory –

角結構

app-> 

    assets-> 
      css -> all css file 
      js -> all js file 

    partials-> all html files 
    vender -> third party file (like angular.js , jquery.js) 

     router.js 
     services.js 
     filter.js 
     directives.js 
     controllers.js 

     index.html

來源

2013-10-10 11:46:10

angularjs應用程序的基本行爲和結構

回答

相關問題