看看這兩個例子;對不起他們都是一個尋呼機...
我試圖保持代碼的自包含的，這樣就可以在一個地方看到的所有的作品。通常，會有構建過程保持代碼和模板以及頁面的分離;不是很多，在這裏。
的好消息是，這些網頁應該沒有這麼多的服務器工作（作爲唯一的外部文件是角），這樣可以節省每一個作爲一個.html頁面，並從驅動器中打開它。
共享配置父母與孩子
<!doctype html>
<html ng-app="myApp" ng-controller="MyController">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<style>
page-flyout { display: block; }
page-flyout.expanded { background-color : grey; }
</style>
</head>
<body>
<main ng-controller="page-controller as page">
<button ng-click="page.toggle()"
>{{ page.flyout.expanded ? "Hide":"Show" }} Flyout</button>
<page-flyout
view="page.flyout"
class="ng-class: {'expanded':page.flyout.expanded,'contracted':!page.flyout.expanded }"
></page-flyout>
</main>
<script type="text/ng-template" id="components/page-flyout/page-flyout.html">
<h4>I am {{ view.expanded ? "OPEN" : "CLOSED" }}</h4>
<button ng-click="flyout.close()" ng-hide="!view.expanded">×</button>
</script>
<script >
var app = initApp();
initAngular(app);
function initAngular (MyApp) {
angular.module("myApp", ["pageFlyout"]);
angular.module("pageFlyout", []);
angular.module("myApp")
.controller("MyController", [MyApp.MyController])
.controller("page-controller", [MyApp.PageController]);
angular.module("pageFlyout")
.controller("page-flyout-controller", ["$scope", MyApp.PageFlyoutController])
.directive("pageFlyout", [function() {
return {
scope: { view: "=" },
restrict: "AE",
replace: false,
controller: "page-flyout-controller",
controllerAs: "flyout",
templateUrl: "components/page-flyout/page-flyout.html"
};
}]);
};
function initApp() {
var MyApp = {
MyController: function MyController() {
},
PageController: function PageController() {
var page = extend(this, { toggle: toggle, flyout: { expanded: false } });
function toggle() {
var currentState = page.flyout.expanded;
page.flyout.expanded = !currentState;
}
},
PageFlyoutController: function PageFlyoutController ($scope) {
var flyout = extend(this, { close: close });
function close() { $scope.view.expanded = false; }
}
};
function extend() {
var args = [].slice.call(arguments);
return angular.extend.apply(angular, args);
}
return MyApp;
}
</script>
</body>
</html>
我使用 「的PageController」 作爲外控制器之間;這個外部元素有一個toggle方法和一個flyout對象。
flyout對象有一個expanded屬性，僅此而已。
這是一個將在父和子之間共享的配置/狀態對象。父母不會知道任何關於孩子的事情，孩子不會知道父母的任何事情......
但是兩者都需要知道這個對象的結構;基本上，父母必須同意給孩子一個符合孩子需求的配置對象，如果它要使用孩子的服務。
在我的子範圍內，我將此對象稱爲view，它在我的指令聲明<page-flyout view="page.flyout">中提供。
的彈出按鈕有一個控制器，具有close方法，這臺view.expanded = false; 因爲父母和兩個份額孩子配置對象，因爲UI事件觸發的摘要進行檢查，這個工程和每個人的快樂......
嘗試一下，看看會發生什麼：彈出式html在一個完全不同的世界中，但按鈕仍然按照它應該做的事情操作，而且彈出式範圍內部和外部的所有文本都保持最新狀態...
...除了這不是那麼幹淨。分享某種可讀狀態將是一回事，但直接寫信給它並且從中讀取的兩個人可能會有點不同。
父控件國家，兒童定義事件，母公司實現事件處理
<!doctype html>
<html ng-app="myApp" ng-controller="MyController">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<style>
page-flyout { display: block; }
page-flyout.expanded { background-color : grey; }
</style>
</head>
<body>
<main ng-controller="page-controller as page">
<button ng-click="page.toggle()"
>{{ page.flyout.expanded ? "Hide":"Show" }} Flyout</button>
<page-flyout
onclose="page.close()"
class="ng-class: {'expanded':page.flyout.expanded,'contracted':!page.flyout.expanded }"
></page-flyout>
</main>
<script type="text/ng-template" id="components/page-flyout/page-flyout.html">
<h4>I am {{ view.expanded ? "OPEN" : "CLOSED" }}</h4>
<button ng-click="flyout.close()">×</button>
</script>
<script >
var app = initApp();
initAngular(app);
function initAngular (MyApp) {
angular.module("myApp", ["pageFlyout"]);
angular.module("pageFlyout", []);
angular.module("myApp")
.controller("MyController", [MyApp.MyController])
.controller("page-controller", [MyApp.PageController]);
angular.module("pageFlyout")
.controller("page-flyout-controller", ["$scope", MyApp.PageFlyoutController])
.directive("pageFlyout", [function() {
return {
scope: { onclose: "&" },
restrict: "AE",
replace: false,
controller: "page-flyout-controller",
controllerAs: "flyout",
templateUrl: "components/page-flyout/page-flyout.html"
};
}]);
};
function initApp() {
var MyApp = {
MyController: function MyController() {
},
PageController: function PageController() {
var page = extend(this, {
toggle: toggle,
close: close,
flyout: { expanded: false }
});
function toggle() {
var currentState = page.flyout.expanded;
page.flyout.expanded = !currentState;
}
function close() {
page.flyout.expanded = false;
}
},
PageFlyoutController: function PageFlyoutController ($scope) {
var flyout = extend(this, { close: close });
function close() { $scope.onclose(); }
}
};
function extend() {
var args = [].slice.call(arguments);
return angular.extend.apply(angular, args);
}
return MyApp;
}
</script>
</body>
</html>
我會救你一些狩獵;幾乎每條線都是100％。
其中重要的是在該指令：
return {
scope: { onclose: "&" }
}
...的符號意味着該屬性$scope.onclose是一種方法，這是對指令的聲明中定義。
果然，當你看看page-flyout聲明，你會發現<page-flyout onclose="page.close()">
現在$ scope.onclose不等於page.close();這麼多，因爲它等於function() { page.close(); }。
這可能，而不是一個簡單的表達，父的範圍內：
<page-flyout onclose="page.flyout.expanded = false">
$scope.onclose = function() { page.flyout.expanded = false; };
，你甚至可以在這裏通過一個名爲PARAMS回你的父母表達/法（不必要的;閱讀了關於它的教程，但基本上你叫$scope.method(paramsObj)，其中對象的鍵是一樣的，在執行的參數名。真的很方便的東西。
在我的情況
所以，我的彈出按鈕調用flyout.close()，我的控制器上的一個方法。我的控制器方法調用$scope.onclose();（我的viewmodel的東西和特定角度的粘合劑之間的分隔），$scope.onclose然後在母公司中調用page.close()，其設置page.flyout.expanded = false;。
不錯。整齊。清潔。
孩子對父母一無所知，但是，我創建了一個父母可以訂閱的事件;在HTML中，不下。
其中一個大問題，雖然。
如果您加載此頁面，您會注意到彈出窗口的文本不會更改，並且彈出窗口的關閉按鈕從不隱藏自身，這取決於彈出窗口是「打開」還是「關閉」。
原因很簡單。
孩子對父母或父母的數據一無所知。
這很好，但在這種情況下，這意味着儘管能夠關閉它本身就好，它永遠不會知道它是否在第一位打開（如果我在父範圍中使用ng-hide，這將解決問題，如果你不想讓它半開放）。
的解決方案，當然，是爲了給孩子一個共享對象，代表一個彈出的狀態...
我們以前去過那裏...... ......除了這一次，它是一個只讀對象（不保證，只是通過練習），並且您正在使用事件進行對話，並使用屬性進行談話。
真正的解決方案包括兩方面：在視圖中使用子視圖的只讀屬性，並創建父級可以掛鉤的事件，更新其模型（以及它返回給孩子在下一個美元摘要）。
然後，除了孩子定義的合同和父母保持的合同之外，任何人都不瞭解另一方。
您是否在尋找這個http://jsfiddle.net/EbDRR/13/？ –
這真的是我想要避免的，我想保持指令和控制器儘可能獨立。即所以如果我將$ scope.fly.flyout的名稱更改爲$ scope.fly.isOpen我不需要更改指令中的任何內容 – sjm