angularjs директива не обновляется, когда значение области обновления

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
    <script type="text/javascript"> 
     (function(){ 
     'use strict'; 
     angular.module('myApp',[]) 
     .controller('TestCtrl',TestCtrl) 
     .directive('trxTablePersonTd',trxTablePersonTd); 

     function TestCtrl($scope){ 
      var vm = $scope.vm = this; 
      vm.trxs = [ 
      {id:"1",acctKey:"2",persons:[{name:'peter',age:20},{name:'hank',age:23}]}, 
      {id:"2",acctKey:"3",persons:[{name:'Joe'},{name:'Jason'}]} 
      ]; 
      $scope.changePerson = function(){ 
      vm.trxs[1]['persons']['age'] = 33; 
      vm.trxs[1]['acctKey'] = 123; 

      } 
     } 
     function trxTablePersonTd($compile){ 
      return{ 
       scope:{persons:'=persons'}, 
       restrict:'A', 

       link:link, 

       replace:false, 
       //compile:compile 
      } 
      function compile(elem,attrs){ 
       return function(scope){ 
       var html = []; 
       scope.persons.map(function(person,index){ 

        html.push('<td>'+person.name+'</td>'); 
        html.push('<td>'+person.age+'</td>'); 
       }); 

       } 
      } 
      function link(scope, elem, attrs){ 
       var html = []; 

       if(scope.persons){ 
       scope.persons.map(function(person,index){ 

        html.push('<td>'+person.name+'</td>'); 
        html.push('<td>'+person.age+'</td>'); 
       }); 
       } 
       elem.replaceWith(html.join('')); 
       $compile(elem.contents())(scope); 
      } 

     } 
     }()); 
    </script> 
    </head> 
    <body ng-app="myApp" ng-controller="TestCtrl"> 
    <button type="button" name="button" ng-click="changePerson()">change person</button> 
    <table border="1"> 
     <tbody> 
     <tr ng-repeat="trx in vm.trxs"> 

      <td> 
      {{trx.id}} 
      </td> 
      <td> 
      {{trx.acctKey}} 
      </td> 
      <td trx-table-person-td persons="trx.persons"> 

      </td> 
     </tr> 
     </tbody> 
    </table> 
    </body> 
</html>

Blockquoteangularjs директива не обновляется, когда значение области обновления

, когда я нажимаю на кнопку неопределенная возраст не получает обновления. может кто-нибудь помочь мне посмотреть на эту проблему

Когда я нажимаю кнопку, неопределенный возраст не обновляется. может кто-нибудь помочь мне посмотреть на эту проблему

источник

2015-11-03 0day

Вы неправильно обновили свою коллекцию в методе $scope.changePerson. persons также является массивом, он хотел бы

$scope.changePerson = function() { 
    vm.trxs[0]['persons'][0]['age'] = 33; //look ['persons'][0] 
    vm.trxs[0]['acctKey'] = 123; 
}

Как @Ed Staub предложить вам нужно $watch вашей коллекции для распространения дальнейших изменений модели как

app.directive('trxTablePersonTd', function ($compile) { 

    return { 
     scope: { persons: '=persons' }, 
     restrict: 'A', 
     link: link, 
     replace: false, 
    } 

    function link(scope, elem, attrs) { 
     if (scope.persons) { 
      scope.$watch('persons', function() { 
       var html = scope.persons.map(function (person, index) { 
        return '<td>' + person.name + '</td>' + '<td>' + (person.age ? person.age : "") + '</td>'; 
       }); 

       elem.empty().append(html.join('')); 
       $compile(elem.contents())(scope); 

      }, true); 
     } 
    } 
});

Кроме того, если у вас нет дополнительный html за исключением td в вашей директиве, я думаю, что вам не нужна директива вообще, просто используйте ng-repeat как

<td ng-repeat="person in trx.persons"> 
    <span>{{person.name}}</span> 
    <span>{{person.age}}</span> 
</td>

источник

2015-11-03 09:04:06 Reza

Я ждал, чтобы узнать, сможет ли кто-нибудь ответить на это лучше и авторитетнее, чем я могу. Я считаю, что проблема заключается в том, что обновления области не воспринимаются так глубоко в структурах данных, как ваши изменения. Я думаю, вам нужно реализовать глубокие часы («смотреть по значению») на vm.trxs. См. https://docs.angularjs.org/guide/scope, прокрутите вниз до раздела «Контроллеры и области применения».

источник

2015-11-03 01:52:44

angularjs директива не обновляется, когда значение области обновления

ответ

Смежные вопросы