how to get compiled nodeValue from an angular element

Question

The basic premise is that I'm trying to access the element's value attribute after it compiles and copy it into a variable. For example: if vm.datasource.data['+ i +'].HolidayName compiled into "Christmas" I want to grab that value and store it in a variable.

Is it possible to copy the compiled value into a variable?

var link = function(scope, elem, attrs){

      setTimeout(function(){
        var checkboxCellArray = elem.find('.md-checkbox-cell');

        _.forOwn(checkboxCellArray, function(node, i) {
          if(angular.element(node).hasClass('md-checkbox-cell')){
            var element = angular.element('<p value="{{vm.selected.length}} checked. {{vm.headers[0].orderBy}}. {{vm.datasource.data['+ i +'].HolidayName}}. {{vm.headers[1].orderBy}}. {{vm.datasource.data['+ i +'].Country}}"></p>')
            var compiled = $compile(element)(scope);

            setTimeout(function(){
              console.log(compiled);
            }, 500)
          }
        });
      }, 1000)
    }

score 0 · Answer 1 · answered Mar 25 '16 at 19:33

0

Seems after hours of toiling i've found the solution 5 minutes after posting...

simply add scope.$apply() after compiling and the variable will have the updated values.

answered Mar 25 '16 at 19:33

Darien Lombardi

105
1
7

Do look at below answer, for better approach – Pankaj Parkar Mar 26 '16 at 20:27

score 0 · Answer 2 · answered Mar 25 '16 at 19:43

The real problem was you were using setTimeout function and updating stuff of angular from it. setTimeout asynchronous event which is modifying angular scope from from outside angular world doesn't intimate angular digest system to run digest cycle. You have to kick off it manually to update binding over an HTML page. This problem can be easily fix by using using $timeout instead of setTimeout, which run your function in setTimeout & will run digest cycle after it.

Code

$timeout(function(){
    var checkboxCellArray = elem.find('.md-checkbox-cell');

    _.forOwn(checkboxCellArray, function(node, i) {
      if(angular.element(node).hasClass('md-checkbox-cell')){
        var element = angular.element('<p value="{{vm.selected.length}} checked. {{vm.headers[0].orderBy}}. {{vm.datasource.data['+ i +'].HolidayName}}. {{vm.headers[1].orderBy}}. {{vm.datasource.data['+ i +'].Country}}"></p>')
        var compiled = $compile(element)(scope);

        $timeout(function(){
          console.log(compiled);
        }, 500)
      }
    });
  }, 1000)
}

how to get compiled nodeValue from an angular element

2 Answers2