将子作用域变量与父变量同步 [英] Sync child scope var with parent var

问题描述

我有一个关于 angular 如何决定创建新的子作用域变量的问题.

http://plnkr.co/edit/Dlsh6WJA1hrCpBgm5IrI?p=preview

JS

angular.module('myapp', []).controller('HomeCtrl', function($scope) {$scope.aaa = 10;$scope.clickMe2 = function() {$scope.aaa++;}}).controller('TestCtrl', function($scope) {$scope.clickMe1 = function() {$scope.aaa = $scope.$parent.aaa ||9;$scope.aaa++;}})

HTML

 
<p>{{aaa}}</p><a ng-click="clickMe2()" href="">点击父级</a><div ng-controller="TestCtrl" style="padding-left:20px;"><p>{{aaa}}</p><a ng-click="clickMe1()" href="">单击子级</a>

这就是我所做的:

1. 点击父级查看两个数字都增加了

2. 然后点击 Child 查看第二个数字增加一次

3. 返回单击父级以仅查看增加的第一个数字

4. 最后再次单击 Child 以查看它从父编号开始并再次增加一次

我的问题:不使用服务，有没有办法始终确保子作用域的变量与父作用域的变量相同?看起来我的作业 $scope.aaa = $scope.$parent.aaa 不是一直都有效.

解决方案

我有一种方法可以始终确保子作用域的变量与父作用域的变量相同:使用 Object 使它们使用相同的引用.

我做了一些改动，你可以使用:

JS

angular.module('myapp', []).controller('HomeCtrl', function($scope) {$scope.aaa = {a:10};//这里改.$scope.clickMe2 = function() {$scope.aaa.a++;//这里.}}).controller('TestCtrl', function($scope) {$scope.clickMe1 = function() {$scope.aaa.a = $scope.$parent.aaa.a ||9;//这里.$scope.aaa.a++;//这里.}})

HTML

 
<p>{{aaa.a}}</p>//这里.<a ng-click="clickMe2()" href="">点击父级</a><div ng-controller="TestCtrl" style="padding-left:20px;"><p>{{aaa.a}}</p>//和这里.<a ng-click="clickMe1()" href="">单击子级</a>

I have a question about how angular decides to create new child scope variable.

http://plnkr.co/edit/Dlsh6WJA1hrCpBgm5IrI?p=preview

JS

angular.module('myapp', [])

.controller('HomeCtrl', function($scope) {
  $scope.aaa = 10;
    $scope.clickMe2 = function() {
    $scope.aaa++;
  }
})

.controller('TestCtrl', function($scope) {

  $scope.clickMe1 = function() {
    $scope.aaa = $scope.$parent.aaa || 9;
    $scope.aaa++;
  }
})

HTML

  <div ng-controller="HomeCtrl">
    <p>{{ aaa }}</p>
    <a ng-click="clickMe2()" href="">Click Parent</a>
    <div ng-controller="TestCtrl" style="padding-left:20px;">
      <p>{{ aaa }}</p>
      <a ng-click="clickMe1()" href="">Click Child</a>
    </div>
  </div>

This is what I did:

1. Click Parent to see both numbers increased

2. Then Click Child to see the second number increased ONCE

3. Go back Click Parent to see only the first number increased

4. Finally Click Child again to see it started from the parent number and again, increased ONCE

My question: Without using services, is there a way to always ensure the child scope's variable IS the same as the parent scope's variable? Look like my assignment $scope.aaa = $scope.$parent.aaa doesn't work all the times.

解决方案

I have a way to always ensure the child scope's variable IS the same as the parent scope's variable: use Object so they use the same reference.

I have made some changes, you can use:

JS

angular.module('myapp', [])

.controller('HomeCtrl', function($scope) {
  $scope.aaa = {a:10}; //change here.
    $scope.clickMe2 = function() {
    $scope.aaa.a++; //here.
  }
})

.controller('TestCtrl', function($scope) {

  $scope.clickMe1 = function() {
    $scope.aaa.a = $scope.$parent.aaa.a || 9; //here.
    $scope.aaa.a++; //here.
  }
})

HTML

 <div ng-controller="HomeCtrl">
    <p>{{ aaa.a }}</p> //here.
    <a ng-click="clickMe2()" href="">Click Parent</a>
    <div ng-controller="TestCtrl" style="padding-left:20px;">
      <p>{{ aaa.a }}</p> //and here.
      <a ng-click="clickMe1()" href="">Click Child</a>
    </div>
  </div>

这篇关于将子作用域变量与父变量同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！