简体   繁体   English

AngularJS - 从转换指令范围中的函数更新父控制器范围内的变量

[英]AngularJS - Updating variables within the parent controller scope from a function in a transcluded directive scope

How are parent controller scope variables updated from within a transcluded directive scope's function? 父控制器范围变量如何从已转换的指令范围的函数中更新?

I am embedding directives into another directive using a transclusion in the following manner: 我通过以下方式使用转换将指令嵌入到另一个指令中:

<my-table>
  <my-getter-button></my-getter-button>
</my-table>

The code for my-table and my-getter-button follows: my-table和my-getter按钮的代码如下:

my-table template: my-table模板:

<table>
  <tr ng-repeat="item in items">
    <td data-id="{{item.Id}}" ng-transclude></td>
  </tr>
</table>

my-table directive: my-table指令:

.directive('myTable', function () {
      return {
          transclude: true,
          restrict: 'E',
          templateUrl: 'views/mytable.html',
          scope: false
      };
  });

my-getter-button directive (with template): my-getter-button指令(带模板):

app.directive('myGetterButton', function () {
    function link(scope, element) {
        scope.finalizeGet = function () {
            var id = element.parent().data('id');
            scope.clear();  // <-- works fine (from parent controller)
            scope.get(id)  // <-- works fine (from parent controller)
            .success(function (data) {
                // The line below was supposed to 
                // update the variables within the parent controller:
                scope.$parent.instance = data; // or scope.instance = data;
                angular.element('#detailsModal').modal('show');
            })
            .error(function (data) {
                scope.errors = data;
            });
        };
    };

    return {
        restrict: 'E',
        template: '<button class="btn btn-info" ng-click="finalizeGet()">' +
                      '<span class="glyphicon glyphicon-book"></span>' +
                  '</button>',
        scope: false,
        link: link
    };
});

I was expecting scope.$parent.instance = data; // or scope.instance = data; 我期待scope.$parent.instance = data; // or scope.instance = data; scope.$parent.instance = data; // or scope.instance = data; to change the parent controller's scope.instance but it did not. 更改父控制器的scope.instance但它没有。

I found a solution for my own problem. 我找到了解决自己问题的方法。 Turns out what I needed was a setter function. 原来我需要的是一个setter函数。 I added the following in my controller: 我在控制器中添加了以下内容:

// Set current model instance of scope.
$scope.setInstance = function(data) {
  $scope.instance = data;
};

And called the setter function (instead of having an assignment operation), as follows: 并调用setter函数(而不是赋值操作),如下所示:

// ...
.success(function (data) {
  scope.setInstance(data);
  angular.element('#detailsModal').modal('show');
})
// ...

It updated the variable in the parent controller scope. 它更新了父控制器范围中的变量。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 AngularJS 指令的 scope 更改不更新父 controller Z31A1FD140BE4BEF2AD511E121EC9ZA - AngularJS change in directive's scope not updating parent controller scope AngularJS:指令转换范围丢失 - AngularJS : Directive transcluded scope lost AngularJS; 将父函数发送到指令范围 - AngularJS; Send a function from the parent into directive scope Access指令的隔离范围来自已转换的内容 - Access directive's isolate scope from within transcluded content AngularJS:将函数传递给在其控制器中调用的指令的隔离范围? - AngularJS : Passing a function to an isolated scope of a directive to be called within its controller? AngularJS指令隔离范围不更新父级 - AngularJS Directive Isolate Scope Not Updating Parent AngularJS:从子指令设置父控制器$ scope变量 - AngularJS : set parent controller $scope variable from child directive AngularJs指令:从模板中的父作用域调用方法 - AngularJs directive: call method from parent scope within template $ scope中的数据更改但未在AngularJS的指令中更新 - Data changes in the $scope but not updating within a directive in AngularJS 使用AngularJS中的$ scope。$ parent。$$ childHead.functionName从控制器访问指令函数 - Accessing directive function from controller using $scope.$parent.$$childHead.functionName in AngularJS
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM