将obj从指令传递给AngularJS中的控制器

时间:2016-09-07 09:36:48

标签: javascript angularjs angular-directive

我正在尝试编写一个获取父控制器和父窗体控制器的指令,并将它们作为单个对象传递给我的控制器,这就是我所拥有的:

HTML:

<div ng-controller="ParentController as self" ng-form="ParentForm">

  <div ng-controller="ChildController1 as self" my-parent="self.parent">
    ChildController1 parent:<br/>
    {{self.parent}}
  </div>

  <br/>

  <div ng-controller="ChildController2 as self" my-parent="self.parent">
    ChildController2 parent:<br/>
    {{self.parent}}
  </div>

</div>

JS:

myApp.directive('myParent', function() {
  var directive = {
    restrict: 'A',
    link: link
  };

  return directive;

  function link(scope, element, attrs) {
    var parentElement = element.parent();
    var parentCtrl = parentElement.controller();
    var formCtrl = parentElement.controller('form');

    var parent = parentCtrl;
    parent.form = formCtrl;

    console.log("directive parent obj: ", parent);

    // How can I pass the parent obj to controller???
  }
});

我在这里写了一个更好的解释情况:https://plnkr.co/edit/axnR6t2Q82IVtzftq7y7?p=preview

我知道在这种情况下我可以在控制器中使用具有不同名称的controllerAs,但我需要使用指令(“restrict:A”指令)。

有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

如果您没有为指令声明自己的范围,那么指令范围与控制器范围相同,因此控制器和指令可以访问相同的范围数据。如果你需要在从指令启动的控制器中执行某些操作,那么在控制器监视范围变量中使用$scope.watch

如果您需要将变量从一个组件传递到另一个组件(控制器到指令,反之亦然),请使用服务。 getter和setter的示例服务:

app.service("myService",function(){

  this.data;

  this.setData=function(val){

     this.data=val;
  };

  this.getData=function(val){

      return this.data;

  };

});

在控制器中添加服务并使用setData,并将其添加到指令并调用getData

示例控制器代码:

myService.setData(this.form);

示例指令

var form=myService.getData();