从单独的控制器访问指令作用域

Accessing directive scope from a separate controller

本文关键字：指令 作用域 访问 控制器 单独      更新时间：2023-09-26

假设我在AngularJS中有一个<lightbox>指令。lighbox有两个参数：title和image_source，这两个参数在其HTML中分别用{{title}}和{{image_source}}引用。

因为我使用Bootstrap的模态，所以指令必须说明页面的最外部范围（如果我将其插入内部DOM元素，则可能会出现显示问题）。

我知道，如果指令在"父"控制器中，有很多交互方式：

<div ng-controller="ParentCtrl">
  <lightbox src='mySrc' ... >
</div>

但我不得不退出：

<div ng-controller="ParentCtrl">
</div>
<lightbox ...>

（编辑：澄清：我被迫将模态OUT放入控制器（这是路由调用的模板），因为如果不这样做，它的交互会很糟糕。另一种方法是将所有页面包装在主控制器中，但我不确定它是否优雅。）

但是，我如何访问内部指令范围并动态更改这两个值呢？

（编辑：考虑使用服务，但不确定这是否是正确的方式）

这是将rootscope调用到指令的方法

angular.module("directiveAPP", [])
    .controller("directiveController", function ($scope, $rootScope) {
    $rootScope.src = "http://picbook.in/wp-content/uploads/2014/07/image_123.jpg";
    $rootScope.title = "hai";
}).directive("lightBox", function () {
    return {
        restrict: 'E',
        template: '<div><img src="{{imageSrc}}" title="{{imageTitle}}" width="100px" style="border:solid #ddd 1px;" /></div>',
        scope: {
            imageSrc: '=',
            imageTitle: '='
        }
    };
});

这是指令的一个用途

<div ng-app="directiveAPP">
    <div ng-controller="directiveController">
        <light-box image-src="src" image-title="title"></light-box>
    </div>
    <light-box image-src="src" image-title="title"></light-box>
</div>

FIDDLE链接

相关文章：