在没有 ui-router 的情况下访问父作用域

Question

我已经通过 $scope.$parent 多次访问我的父范围，但是我正在尝试将 ui-router 集成到我的项目中并且不再可以访问 $scope.parent

这是一个笨蛋：http://plnkr.co/edit/hdoXBngnMatk6HKj4fMC?p=preview

我创建了 2 个按钮，一个有嵌套视图和控制器，一个没有.. 当你点击没有嵌套的按钮时：

1: errorBanner 设置为真
2：{{myMessage}} 设置了一个值

但是，单击嵌套按钮后，{{myMessage}} 不再更新。

app.js

var app = angular.module('plunker', ['ui.router']);

app.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/index');

    $stateProvider
        .state('index', {
            url: '/index',
            templateUrl: 'view.html'
        })
}]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.controller('nestedController', function($scope) {
  $scope.setValue = function () {
    $scope.$parent.errorBanner = true;
    $scope.$parent.myMessage = 'hey, it updated!';
  }
});

app.controller('nonNestedController', function($scope) {
  $scope.setValue = function () {
    $scope.$parent.errorBanner = true;
    $scope.$parent.myMessage = 'hey, it updated!';
  }
});

Answer 1

定义ng-model时应遵循dot rule以避免$parent注解。通过遵循点规则，您可以获得子控制器内的原型继承范围。

标记

  <p>Something should appear below on click: </p>
  <div class="hero-banner-error" data-ng-show="model.errorBanner">
      <p>{{ model.myMessage }}</p>
  </div>

控制器

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.model = {};
});

app.controller('nestedController', function($scope) {
  $scope.setValue = function () {
    $scope.model.errorBanner = true;
    $scope.model.myMessage = 'hey, it updated!';
  }
});

app.controller('nonNestedController', function($scope) {
  $scope.setValue = function () {
    $scope.model.errorBanner = true;
    $scope.model.myMessage = 'hey, it updated!';
  }
});

也不要从已从状态加载的 view.html 本身分配控制器，您的状态应如下所示，并从 view.html

中删除 ng-controller

$stateProvider
.state('index', {
  url: '/index',
  templateUrl: 'view.html',
  controller: "nestedController"
})

Plunkr Here

Answer 2

虽然 Pankajs 的回答感觉是正确的，但我找到了另一种解决方法。

只需从我的 .html 文件中删除 nestedController 的声明，然后在 app.js 中声明它，我就可以访问 $parent $scope:

旧：

$stateProvider
    .state('index', {
        url: '/index',
        templateUrl: 'view.html'
    })

新：

$stateProvider
    .state('index', {
        url: '/index',
        templateUrl: 'view.html',
        controller: 'nestedController'
    })

更新的插件：http://plnkr.co/edit/hdoXBngnMatk6HKj4fMC?p=preview

在没有 ui-router 的情况下访问父作用域

Accessing parent scope working without ui-router

angularjs

angularjs-scope

angularjs-controller

angular-ui-router