Geek Answers Handbook

The named view in angular ui-router does not update, despite being viewed

I have a variable with the area $scope.fooin which I am holding the clock. It can be updated through the text field in the form.

I have two named views Aand Bon the page that I show with angular ui-router. The named view Ahas a text form field that tracks changes in the controller through ng-model="foo". When a value is foochanged by the user, it changes the value of another variable with a region $scope.barthat is an array in the controller, which is used in the directive ng-repeaton the named view B. Changes to $scope.barare made using the method $scope.$watchin the controller.

The problem I am facing is that when changing, fooI could see changes in barthe named view A, but not on the named view B.

Can someone help me solve this problem?

Edit : Here is the plunker for this problem.

+4
source share
2 answers

I created a second answer to track this problem in plunker , which @skip (OP) passed me an example fo problem.

First, there is an updated version work

plunker, , . :

state def:

.state('home', {
            url: '/',
            views: {

                '': { templateUrl: 'home.html' },

                'A@home': {
                    templateUrl: 'a.html',
                    controller: 'MainCtrl'
                },

                'B@home': {
                    templateUrl: 'b.html',
                    controller: 'MainCtrl'
                }
            }

RootCtrl defintion:

.state('home', {
            url: '/',
            views: {

                '': { 
                  templateUrl: 'home.html', 
                  controller: 'RootCtrl' // here we do use parent scoping
                },

                'A@home': {
                    templateUrl: 'a.html',
                    controller: 'MainCtrl'
                },

                'B@home': {
                    templateUrl: 'b.html',
                    controller: 'MainCtrl'
                }
            }

:

app.controller('MainCtrl', function($scope) {
  var fruits = [{"name": "Apple"}, {"name": "Banana"}, {"name": "Carrot"}];

  $scope.bar =  $scope.bar || []; 

  $scope.foo = 2;

  $scope.$watch('foo',function(value, oldValue){
      $scope.bar = [];
      getBar(fruits, value);
  });

  function getBar(fruits, howManyFruits) {
    for(var i=0; i < $scope.foo; i++) {
        $scope.bar.push(fruits[i]);
    }
  }

});

( ):

app.controller('RootCtrl', function($scope) { 
  $scope.bar = []; 
})
app.controller('MainCtrl', function($scope) {
  var fruits = [{"name": "Apple"}, {"name": "Banana"}, {"name": "Carrot"}];

  //$scope.bar =  $scope.bar || []; 

  $scope.foo = 2;

  $scope.$watch('foo',function(value, oldValue){
      $scope.bar.length = 0;
      getBar(fruits, value);
  });

  function getBar(fruits, howManyFruits) {
    for(var i=0; i < $scope.foo; i++) {
        $scope.bar.push(fruits[i]);
    }
  }

});

,

I.

() . ?

-

II.

$scope.bar !. . ? :

,

// wrong
$scope.bar = [];
// good
$scope.bar.length = 0;

III.

, , A B ( ), , ,

, ... . , , .

  • angularjs guide -

, , . , ng-controller .

,

+3

plunker, , .

:

  • (cite:)

, , . , ().

, , u-views - . .

: scope view .

:

$stateProvider
    .state('root', { 
        url: '/root',
        templateUrl: 'tpl.root.html',
        controller: 'RootCtrl',            // this root scope will be parent
    })
    .state('root.entity', {
        url: '/entity',
        views:{
            'A': {
                templateUrl: 'tpl.a.html',
                controller: 'ACtrl',        // scope is inherited from Root
            },
            'B': {
                templateUrl: 'tpl.b.html',
                controller: 'ACtrl',        // scope is inherited from Root
            }
        }
    })

, - $scope.bar . :

.controller('RootCtrl', function ($scope, $state) {
  $scope.bar = ['first', 'second', 'last'];

})
.controller('ACtrl', function ($scope, $state) {
  // *) note below
  $scope.foo = $scope.bar[0];
  $scope.$watch("foo", function(val){$scope.bar[0] = val; });
})
.controller('BCtrl', function ($scope, $state) {

})

*) note: 1) 2) $watch 3) , ... , .. , ...

, , A B... - bar, $scope.

+5

More articles:


All Articles