Question

假设我在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置于控制器（这是路由调用的模板），因为如果它发生严重交互不是。另一种方法是将所有页面包装在主控制器中，但我不确定它是否优雅。）

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

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

Answer 1

这是将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 LINK

从单独的控制器访问指令范围

1 个答案: