AngularJS - Cannot set scope value into template

Question

I have following function:

$scope.setDetailToScope = function(data) {
    $scope.$apply(function() {
        //$scope.order = data;
        $rootScope.order = data;
        setTimeout(function() {
            $scope.$apply(function() {
                //wrapped this within $apply
                $scope.order = data[0];
                console.log('message:' + $scope.order);
                console.log($scope.order);
            });
        }, 100);
    });
};

"

console.log($scope.order);

Gives me values which has been set into scope.

But i cannot get these values in template.

<!-- DEBUG DIV -->
<div class="debugDiv" ng-show="$root.debugable == true">
 {{columns}}
</div>
<div data-ng-controller="OrdersCtrl" ng-init="initData()"> 
    <div id="orders_grid" >

    </div>
</div>
<!-- GRID TOOLBAR BUTTON TEMPLATE -->
<script id="template" type="text/x-kendo-template">
  <a class="k-button" href="\#/orders/create">Add</a>
</script>

<!-- ORDER DETAIL DIV -->
<div class="container" id="orderDetail" data-ng-controller="OrdersCtrl"  ng-if="'detailSelected == true'" xmlns="http://www.w3.org/1999/html">
    <!-- DEBUG DIV -->
    <div class="debugDiv" ng-show="$root.debugable == true">
      {{order}} <!--NOT WORKING-->
   </div>

If i tried to add values into rootscope it works, but in this case i cannot get value into ng-model.

What i'm doing wrong please?

Many Thanks for any help.

EDIT:

If i tried solution wit $timeout i got on console.log($scope.order);

following object which is not passed into the template:

_events: ObjectacrCrCode: "interlos"actionName: ht.extend.initarchived: falsebaseStationInfo: ht.extend.initbsc: "bsc1"btsRolloutPlan: "plan1"candidate: "B"costCategory: ht.extend.initcreatedBy: ht.extend.initdirty: falsefacility: ht.extend.initid: 3location: ht.extend.initmilestoneSequence: undefinednetworkType: "Fix"note: "poznamka"orderNumber: 111113orderType: ht.extend.initotherInfo: ht.extend.initparent: function (){return e.apply(n||this,r.concat(h.call(arguments)))}partner: ht.extend.initpersonalInfo: ht.extend.initproject: ht.extend.initpsidCode: "psid1"sapSacIrnCode: "sap1"uid: "924c0278-88d0-4255-b8ac-b004155463fa"warehouseInfo: ht.extend.init__proto__: i

Can you provide a JSFiddle? – Rodolfo Jorge Nemer Nogueira Dec 30 '14 at 13:08 — Rodolfo Jorge Nemer Nogueira, Dec 30 '14 at 13:08

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

well I'm not sure why you are using a setTimeout with scope apply, to me is safer to use a $timeout since it fires another digest cycle,

try something like

$scope.setDetailToScope = function(data) {
    $timeout(funtion(){
        //$rootScope.order = data; try either data or data[0]
        $scope.order = data[0];

    },100);
};

please note that calling nested apply methods can run into some problems with the angularjs digest cycle you may get an error like "digest already in progress" so put attention to it.

NOTE:

it seems like you got some dirty data there, so try to do a map between the data and the scope

$scope.order ={};
$scope.order.uid = data.uid;
$scope.order.orderNumber = data.orderNumber //and so on

in your template try something like:

 <div class="debugDiv">
     <p> {{order.uid}} </p>
     <p> {{ order.orderNumber}} </p>
   </div>

this could be a little bit rustic but it worth to try it out.

edited May 23 '17 at 11:50

Community

1
1

answered Dec 30 '14 at 13:34

pedrommuller

15,741
10
76
126

try either with data[0] or data, remove the ng-if you got in the details just for debugging purposes, try to do a console log and check what you got on the scope or rootscope – pedrommuller Dec 30 '14 at 13:54
I tried you idea with static values, in console.log seems to be OK but nothing is displayed in template. But if i inserted some value into form inputs manually value appeared in the scope..is it strange. – redrom Dec 30 '14 at 14:33
do you have the elemens in the DOM? can you try to remove ng-if="'detailSelected == true'" and also ng-show="$root.debugable == true" just for checking there's nothing to do with the conditions you are implementing for the dom – pedrommuller Dec 30 '14 at 14:39

AngularJS - Cannot set scope value into template

1 Answers1