0
我想弄清楚AngularJS是如何工作的（或者應該工作）。我記得一個非常簡單的應用程序，包括標題，主要內容和頁腳。主要內容有一個mainCtrl，它保存大部分數據（在這個階段沒有服務）。我在主內容div之外構建了頁眉和頁腳作爲指令。是否有可能（或推薦）從我的指令中訪問和修改（綁定）mainCtrl變量？我讀了那個控制器和控制器，創建了一個控制器的副本，而需求可能是我想要的。但我無法讓它工作。也許一些信息和指向正確的方向可能會有所幫助。 PS每個控制器使用服務/工廠獲取數據會更好嗎？如果是的話，將一些數據存儲在控制器中而不是始終調用服務是否有效？ 如果您需要任何澄清，請讓我知道。如何綁定到來自兄弟指令的控制器變量
*編輯：演示在這裏：plunker Demo
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My AngularJS App</title>
<meta name="description" content="">
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
<link rel="stylesheet" href="app.css">
</head>
<body ng-app="menuApp">
<div header-directive></div>
<hr/>
<div style="min-height: calc(100vh - 400px)" ng-controller="MainController as main">
<p>Direct access to (mainCtrl) SCOPE user: {{ user }}</p>
<p>Direct access to mainCtrl user: {{ main.user }}</p>
<ul>
<li ng-repeat="item in main.menuItems"><a ng-href="#/{{ item.toLowerCase() }}">{{ item }}</a></li>
</ul>
<!--<img src="http://ost2.gr/files/gimgs/1_random2.png">-->
<ng-view></ng-view>
</div>
<div footer-directive></div>
Below footer: {{ main.user }}
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="menuApp.config.js"></script>
<script src="mainController.js"></script>
<script src="ProductsController.js"></script>
<script src="ChartsController.js"></script>
<script src="AboutController.js"></script>
<script src="footerDirective.js"></script>
<script src="headerDirective.js"></script>
</body>
</html>
主控制器：
(function() {
'use strict';
angular
.module('menuApp')
.controller('MainController', MainController);
MainController.$inject = ['$scope'];
/* @ngInject */
function MainController($scope) {
/* jshint validthis: true */
var vm = this;
vm.activate = activate;
vm.title = 'main';
activate();
////////////////
function activate() {
vm.menuItems = ['Main', 'Products', 'Charts', 'About'];
$scope.user = 'SCOPE USER';
vm.user = 'user from MainController';
}
}
})();
頭指令：
(function() {
'use strict';
angular
.module('menuApp')
.directive('headerDirective', headerDirective);
headerDirective.$inject = ['$window'];
/* @ngInject */
function headerDirective($window) {
// Usage:
//
// Creates:
//
var directive = {
//link: link,
restrict: 'EA', //This means that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
replace: true,
templateUrl: "header.html"
//require: '^MainController'
//scope: { user: '=' }
,controller: 'MainController'
,controllerAs: 'main'
};
return directive;
//function link(scope, element, attrs) {
//}
}
})();
頁腳指令：
(function() {
'use strict';
angular
.module('menuApp')
.directive('footerDirective', footerDirective);
footerDirective.$inject = ['$window'];
/* @ngInject */
function footerDirective($window) {
// Usage:
//
// Creates:
//
var directive = {
//link: link,
restrict: 'EA',
replace: true,
templateUrl: 'footer.html',
require: "^headerDirective"
//scope: {'main.user': '='}, // This is one of the cool things :). Will be explained in post.
//,controller: 'MainController'
//,controllerAs: 'main'
};
return directive;
//function link(scope, element, attrs) {
//}
}
})();
頁眉模板：
<div>
<p>Scope user: {{ user }} </p>
<p>Main user: {{ main.user }}</p>
<hr/>
<p>
This part of the header is always here
</p>
<p ng-if="user">
User is logged in :D
</p>
<p ng-if="!user">
Hey buddy, log in! Be cool
</p>
<hr/>
<p>Scope user: <input ng-model="user"> {{ user }}</p>
<p>Main user: <input ng-model="main.user"> {{ main.user }}</p>
</div>
頁腳模板：
<md-toolbar class="md-medium-tall">
<div layout="row" layout-align="center center" flex>
<span>FOOTER</span>
</div>
$SCOPE USER: {{ user }}
<hr/>
MAIN USER: {{ main.user }}
</md-toolbar>
你能提供與您的實際應用一個plunker繼承？無論如何，我覺得你想要做的就是配置你的指令的隔離範圍。查看隔離範圍部分的https://docs.angularjs.org/guide/directive。 – Okazari