如何在多個模板中訪問控制器變量
[英]How to access controller-variables in multiple templates
問題描述
嗨，我是Angular JS的新手，我試圖通過顯示或隱藏填充整個屏幕的div來創建“燈箱”。 但是，“ ng-click”事件和div位於不同的模板上。
第一個模板（應該顯示div的位置）：
<body ng-app="portfolio" ng-controller="lightboxController" >
<div ng-show="lightbox" class="lightbox">
<p ng-click="checkLightbox()">go back</p>
<p>{{message}}</p>
</div>
<div class="top-menu">
<a href="#portfolio" class="top-menu-button">portfolio</a>
<a href="#about" class="top-menu-button">about</a>
<a href="#contact" class="top-menu-button">contact</a>
</div>
<div id="content-wrapper">
<div id="main-content">
<div ng-view></div>
</div>
</div>
</body>
相關控制器：
app.controller('lightboxController', function($scope) {
$scope.checkLightbox = function(){
$scope.lightbox;
lightbox= !lightbox;
console.log(lightbox);
};
$scope.message = 'Everyone come and see how good I look!';
});
第二個模板（ng-click事件所在的位置）：
<div class="grid">
<div class="grid-item dreiD video" ng-click="checkLightbox()">
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
錯誤消息顯示： ReferenceError：燈箱未定義
4 個解決方案
解決方案1
0 2016-06-03 16:03:16
我不太確定您的checkLightbox（）方法應該做什么。
但是，如果要使其可重用，最好的解決方案是將checkLightbox功能重構為可重用的指令。
像這樣：
function checkLightbox() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.on('click', function() {
// add your code here
})
}
}
}
app.directive('checkLightbox', checkLightbox);
現在，您可以通過在任意位置添加check-lightbox屬性來在視圖中的任何位置使用此功能。
<div class="grid">
<div class="grid-item dreiD video" check-lightbox>
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
解決方案2
0 已采納 2016-06-03 16:10:27
請執行以下操作：您的html看起來像
<body ng-app="app" ng-controller="lightboxController" >
<div ng-show="lightbox" class="lightbox">
<p ng-click="checkLightbox()">go back</p>
<p>{{message}}</p>
</div>
<div class="top-menu">
<a href="#portfolio" class="top-menu-button">portfolio</a>
<a href="#about" class="top-menu-button">about</a>
<a href="#contact" class="top-menu-button">contact</a>
</div>
<div id="content-wrapper">
<div id="main-content">
<div ng-view></div>
</div>
</div>
<div class="grid">
<div class="grid-item dreiD video" ng-click="checkLightbox()">
<img src="data/portfolio/logo-animation/thumb.gif" class="thumb"/>
</div>
</div>
</body>
角度控制器看起來像：
var app = angular.module('app', []);
app.controller('lightboxController', function($scope) {
$scope.checkLightbox = function(){
$scope.lightbox;
$scope.lightbox= !$scope.lightbox;
console.log(lightbox);
};
$scope.message = 'Everyone come and see how good I look!';
});
您可以點擊這里運行
解決方案3
0 2016-06-03 16:38:48
需要在任何其他控制器中使用它們時，請在$ rootScope中聲明函數或變量。
解決方案4
-1 2016-06-03 15:48:03
將您的控制器轉換為工廠，並在$ rootScope級別創建作用域：
app.factory('lightboxController', ['$rootScope', function($rootScope) {
$rootScope.checkLightbox = function(){
$rootScope.lightbox;
lightbox= !lightbox;
console.log(lightbox);
};
$rootScope.message = 'Everyone come and see how good I look!';
}]);
AngularJS，具有不同模板但具有相同控制器的多個路由怎么樣？
[英]AngularJS, How about multiple routes with different templates but the same controller?
如何使用模板從另一個IIFE中訪問一個IIFE中的變量？
[英]How to access variables inside one IIFE from another using templates?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.