如何访问多个模板中的控制器变量

Question

您好，我是 Angular JS 的新手，我正在尝试通过显示或隐藏填满屏幕的 div 来创建 "lightbox"。但是，"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: lightbox is not defined

Answer 1

将您的控制器转换为工厂并在 $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!';


}]);

Answer 2

我不太确定您的 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"/>

Answer 3

进行如下操作：你的 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>

Angular 控制器看起来像：

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!';
});

您可以运行通过 clicking here

Answer 4

只要您需要在任何其他控制器中使用函数或变量，就在 $rootScope 中声明它们。

如何访问多个模板中的控制器变量

How to access controller-variables in multiple templates

javascript

angularjs

angularjs-ng-show