Question

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

2016-06-03

69

javascript angularjs angularjs-ng-show

嗨，我是 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：未定义灯箱

Answer 1

按如下操作：您的 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!';
});

您可以通过点击此处

来运行它

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

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

vcode

2016-06-03