2014년 12월 30일 화요일

[AngularJS] Adding promises to chain in directives

I am a newbie at angular promises. I succesfully run some codes of the construction of $q.defer() --- promise.than() ---- resolve() but I got stuck when tried to chain promises that were declared inside directives. I have prepared the code that confuses me why promises doesn't wait for each other in the chain. I hope its a metter of a little thing. The code is below.

Thank you in advance.

demo: plnkr


<!DOCTYPE html>

<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
</head>
<body ng-controller="MainCtrl">
  <a defer-magic ng-repeat='a2 in [0,0,0,0,0,0,0] track by $index'>{{$index+1}}</a> 
  <script>
    console.clear();
    var app = angular.module('plunker', []);
    app
      .controller('MainCtrl', ['$scope', '$q', '$timeout',
        function($scope, $q, $timeout) {
          var i = 0;
          $scope.chain = $q.when();
        }
      ])
      .directive('deferMagic', ['$q', '$timeout',
        function($q, $timeout) {
          var dir2 = {
            link: function(s, e, a) {
              s.chain = s.chain.then(function() {
                $timeout(function() {
                  console.log(e[0].childNodes[0].nodeValue);
                  document.write(e[0].childNodes[0].nodeValue+'... ');
                  return e[0].childNodes[0].nodeValue
                }, 2000)
              });
            }
          }
          return dir2
        }
      ]);
  </script>
</body>
</html>
Sth wrong with link....

Updated link: 




I have almost managed it. Any suggestions and comments would be greatly appreciated.





<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
</head>

<body ng-controller="MainCtrl">
  <div defer-magic ng-repeat='a2 in [0,0,0,0,0,0,0] track by $index'>{{$index+1}}</div>
  <script>
    console.clear();
    var app = angular.module('plunker', []);
    app
      .controller('MainCtrl', ['$scope', '$q', '$timeout',
        function($scope, $q, $timeout) {
          $scope.list2 = [];
          $scope.fn = function() {
            var t0 = parseInt(Math.random() * 4000),
              el = $scope.list2[0].element2[0],
              val2 = el.childNodes[0].nodeValue;
            console.log(t0);
            el.childNodes[0].nodeValue = t0;
            el.style.backgroundColor = '#ddd';
            $scope.list2.shift().defer2.promise.then(function() {
              !$scope.list2[0] || $timeout(function() {
                $scope.list2[0].defer2.resolve();
                $scope.fn();
              }, t0)
            })
          }
        }
      ])
      .directive('deferMagic', ['$q', '$timeout',
        function($q, $timeout) {
          var dir2 = {
            link: function(s, e) {
              var deff2 = $q.defer();
              s.list2.push({
                element2: e,
                defer2: deff2
              });
              if (s.$last) {
                s.list2[0].defer2.resolve();
                s.fn();
              }
            }
          }
          return dir2
        }
      ]);
  </script>
</body>

</html>

Thank you



What is it you are trying to accomplish? Usually, if you need to return a promise, it belongs in a service, not in a directive.
then you are using the DOM to store data, and reading it back out. I'm not sure if you do this just for the sample. Nevertheless is this a bad idea, Angular hands you way better tools to handle this kind of thing.
also the DOM manipulation in the controller is a big no-no. Again, there are much better way's to handle this.

So, what is it you are trying to achieve? if I know that, I can offer you better help.



Thanks for the answer, Sander. So i will explain the idea.

This issue is a part of my project I currently run. In general, the project is to make textareas flexible that they will enlarge and shrink accordingly when the text will be typed in them.

The idea is that the user input element will be binded to a div. The div will be css-styled so it will be as wide as current textarea and heigh adequately as current amount of text.

So when there is much text the div will be high and when there is little text the div will be low.

When the user focuses one of textareas the binding to the div will be estavlished and previeus binding (if any) will be over so it must not be more then one textarea binded to the div.

I have managed the code of the part of the project described above and it worked.

But there is another thing i must resolve in that research. It is an issue of storing and restoring data that was filled by user. The data is stored in database.

When the page opens the blank form of the textareas will appear. Then the data from database will be filled to the textareas. Then each of the textareas will be shaped to adjust its height to the text amount. The way o shaping a height of each area will be the same as when the user would focusing the textarea but then it just will be the script to controll each textarea process.

So then in the code it must be provided the chain of jobs. Each job should deal with one textarea. The job should establish the data binding to the div, adjust the height of the textarea to the one of the div, end the binding and say to the next textarea: 'Now you are the one who can use the div to adjust his height'.

So then the defer will be the amount time of textarea height adjusting. The promise will be 'When I finish I will let you use that div'.  The resolve will be 'I have finished height adjusting'.

I am just trying to code such a chain of jobs for DOM elements that were created by ng-repeat. That chain needs an access to the dom elements. That access is via directive. Directives should comunicate each other to say "i have resolved" to the next. The comunication is via the scope of the main controller. So this is why I try to learn using promises.



hmm, 

So you have a ng-repeat of data coming from a DB, and you want to disable edit until all your text-area's are done re-sizing. Did I get that right?



I have a ng-repeat of data coming from a DB, and I want to do re-sizing of each textarea one by one in synchronic way. I mean there willl be no more than one textarea that is being processed in any point in time.

The reason is that the way of resizing is so that it cannot be resized more than one element in the same time.

I have prepared a pic to show the way: http://i.imgur.com/VH0SxGi.png?1
 

On that pic, 'process' means resizing. It should be the syncronic way of process one by one area. 


작성자: 시간:

댓글 없음:

댓글 쓰기

피드 구독하기: 댓글 (Atom)