Question

我在访问$ uibmodal

中的父控制器方法/变量时遇到了麻烦

我的HTML模式：

<div ng-controller="TestCtrl as vm">
  <div class="modal-demo lg">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">

      qweqweqweqweqw

      {{vm.test}}fwewewerwqqwer
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="vm.ok()">OK</button>
      <button class="btn btn-warning" type="button" ng-click="vm.ok()">Cancel</button>
    </div>
  </div>
</div>

我的控制器：

AltoDevApp.controller('TestCtrl', ['$uibModal',
    function TestCtrl($uibModal) {
    $uibModal.open({
              ariaLabelledBy: 'modal-title',
              ariaDescribedBy: 'modal-body',
              templateUrl: 'member/professional/profile/education/partials/upload.html',
              controller: angular.noop,
              controllerAs: 'vm'
            });

 vm.ok = function () {
    alert('hi');
  };
    }]);
})();

但是无法从模型

访问vm.ok（）

Answer 1

在模态定义对象中为controllerAs属性使用不同的名称：

AltoDevApp.controller('TestCtrl', ['$uibModal',
  function TestCtrl($uibModal) {

    $uibModal.open({
          ariaLabelledBy: 'modal-title',
          ariaDescribedBy: 'modal-body',
          templateUrl: 'member/professional/profile/education/partials/upload.html',
          controller: angular.noop,
          //controllerAs: 'vm'
          //USE different name
          controllerAs: 'modalvm'
     });

     var vm = this;    
     vm.ok = function () {
        alert('hi');
     };
}]);

当子控制器绑定到与父级相同的属性名称时，子属性名称（vm）会隐藏父属性名称（vm）。如果子节点使用不同的名称绑定，则可以通过原型继承访问父属性。

有关详细信息，请参阅AngularJS Wiki - What are the nuances of scope prototypal inheritance。

嵌套作用域是我们从Controller看到的很好的返回语法，通常我们必须使用当前作用域的$parent属性来缩小作用域以获得我们需要的位置。

事情更加清晰，可以跨范围正确访问变量：
<div ng-controller="MainCtrl as main">
  {{ main.title }}
  <div ng-controller="AnotherCtrl as another">
    Scope title: {{ another.title }}
    Parent title: {{ main.title }}
    <div ng-controller="YetAnotherCtrl as yet">
      Scope title: {{ yet.title }}
      Parent title: {{ another.title }}
      Parent parent title: {{ main.title }}
    </div>
  </div>
</div>
没有hacky $parent来电。如果控制器在DOM /堆栈中的位置发生变化，则顺序$parent.$parent.$parent.$parent中的位置可能会发生变化！在词汇上访问范围非常有意义。

— Todd Moto: Digging into Angular’s “Controller as” syntax (Nested scopes)

在不使用范围的情况下访问$ uibmodal中的父控制器

1 个答案: