Question

我已经通过$ scope。$ parent访问了我的父作用域，但是我试图将ui-router集成到我的项目中并且不能长时间访问$ scope.parent

这是一个掠夺者：http://plnkr.co/edit/hdoXBngnMatk6HKj4fMC?p=preview

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

1：errorBanner设置为true
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' })

更新了plunker：http://plnkr.co/edit/hdoXBngnMatk6HKj4fMC?p=preview

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

2 个答案: