AngularJS - 在指令之间传递范围

Question

为了抽象，我试图在指令之间传递范围但收效甚微......基本上，这是一个模态类型场景:

指令 A - 处理屏幕元素的点击功能:

.directive('myElement', ['pane', function(pane){
return {
    restrict: 'A',
    scope: {},
    link: function(scope,elem,attrs){

        //im going to try and call the form.cancel function from a template compiled in another directive

        scope.form = {
            cancel: function(){
                pane.close();
            }
        };

        scope.$watch(function(){
            var w = elem.parent()[0].clientWidth;
            elem.css('height',(w*5)/4+'px');
        });
        elem.on('click', function(){

            //this calls my service which communicates with my other directive to 1) display the pane, and 2) pass a template compiled with this directive's scope

            pane.open({
                templateUrl: 'views/forms/edit.html',
                scope: scope //I pass the scope to the service API here
            });
        });
    }
}
}])

我有一个名为“Pane”的服务来处理 API:

.service('pane',['$rootScope', function($rootScope){
    var open = function(data){
        $rootScope.$broadcast('openPane',data); //this broadcasts my call to open the pane with the template url and the scope object
    };
    var close = function(){
        $rootScope.$broadcast('closePane');
    };
return {
    open: open,
    close: close
}
}]);

最后，指令 B 等待包含模板 url 和范围的“openPane”广播:

.directive('pane',['$compile','$templateRequest','$rootScope', function($compile,$templateRequest,$rootScope){
return {
    restrict: 'A',
    link: function(scope,elem,attrs){
        var t;
        scope.$on('openPane', function(e,data){ //broadcast is received and pane is displayed with template that gets retrieved
            if(data.templateUrl){
                $templateRequest(data.templateUrl).then(function(template){

                    //this is where the problem seems to be. it works just fine, and the data.scope object does include my form object, but calling it from the template that opens does nothing
                    t = $compile(template)(data.scope); 

                    elem.addClass('open');
                    elem.append(t);
                }, function(err){
                    console.log(JSON.stringify(err));
                });
            }
            else if(data.template){
                t = $compile(angular.element(data.template))(data.scope);
                elem.addClass('open');
                elem.append(t);
            }
            else console.log("Can't open pane. No templateUrl or template was specified.")
        });
        scope.$on('closePane', function(e,data){
            elem.removeClass('open');
            t.remove();
        });
    }
}
}])

问题是，当最后一个指令“pane”接收到“openPane”广播时，它会很好地打开并附加模板，但是当我调用原始指令中定义的函数“form.cancel()”时像这样:

<button type="button" ng-click="form.cancel()">Cancel</button>

...没有任何反应。事实是，我不确定我在做什么是否合法，但我想了解为什么它不起作用。这里的最终目标是能够将一个指令的范围与表单模板一起传递给 Pane 指令，因此我的所有表单(由它们自己的指令控制)都可以“注入(inject)”到 Pane 中。

Answer 1

在没有运行示例的情况下，我怀疑可能的原因是传递给 Pane 模板时范围的范围。当您编译 Pane 模板时，作用域本身确实会被传递和使用，但它的闭包会在此过程中丢失，因此您可能看不到 pane。服务是指令工厂关闭的一部分和form.cancel用途。

我写了一个简化的例子，它确实有效并且不依赖于闭包而是依赖于局部变量。如果你调用 .bind(pane)，你可以完成类似的事情在你的 scope.form.cancel功能并在内部替换 pane通过 this .

所以这是一个 working example这是它的代码:

/* ************ */
/* Pane service */

class PaneService {

  constructor($rootScope) {
    console.log('pane service instantiated.', this);
    this.$rootScope = $rootScope;
  }

  open(template, scope) {
    this.$rootScope.$emit('OpenPane', template, scope);
  }

  close(message) {
    this.$rootScope.$emit('ClosePane', message);
  }
}
PaneService.$inject = ['$rootScope'];

/* ************************* */
/* Pane directive controller */

class PaneController {
  constructor($rootScope, $compile, $element) {
    console.log('pane directive instantiated.', this);
    this.$compile = $compile;
    this.$element = $element;
    $rootScope.$on('OpenPane', this.open.bind(this));
    $rootScope.$on('ClosePane', this.close.bind(this));
  }

  open(event, template, scope) {
    console.log('pane directive opening', template, scope);
    var t = this.$compile(template)(scope);
    this.$element.empty().append(t);
  }

  close(evet, message) {
    console.log('pane directive closing', message);
    this.$element.empty().append('<strong>' + message + '</strong>');
  }
}
PaneController.$inject = ['$rootScope', '$compile', '$element'];

var PaneDirective = {
  restrict: 'A',
  controller: PaneController,
  controllerAs: 'pane',
  bindToController: true
}

/* *************** */
/* Page controller */

class PageController {
  constructor(paneService, $scope) {
    console.log('page controller instantiated.', this);
    this.paneService = paneService;
    this.$scope = $scope;
  }

  open() {
    console.log('page controller open', this);
    this.paneService.open('<button ng-click="page.close(\'Closed from pane\')">Close from pane</button>', this.$scope);
  }

  close(message) {
    console.log('page controller close');
    this.paneService.close(message);
  }
}
PageController.$inject = ['paneService', '$scope'];

angular
  .module('App', [])
  .service('paneService', PaneService)
  .directive('pane', () => PaneDirective)
  .controller('PageController', PageController);

页面模板非常简单:

  <body ng-app="App">
    <h1>Hello Plunker!</h1>
    <div ng-controller="PageController as page">
      <button ng-click="page.open()">Open pane</button>
      <button ng-click="page.close('Closed from page')">Close pane</button>
    </div>
    <div pane></div>
  </body>