AnguarJs: ng-repeat only work after clicked button inside directive

Question

I want to bind an array (customLayers) and use it for ng-repeat. I fill the array inside the kv.colorMap Object. I have three directives using these technique. But the directive updates the binded array on view ONLY after pressing a functionless button (checkResult), which is inside this directive.

Directive Template Code:

...
<div class="createInfo colorExprContainer">
    <div ng-repeat="layer in customLayers">{{layer.color}}</div>
</div>

<div class="buttonWrapper text-center">
    <button class="btn" ng-click="checkResult()">Ergebnis prüfen</button>
</div>
...

Directive JavaScript Code:

app.directive('boolKv', function($parse, $timeout){
return {
    restrict: 'E',
    replace:true,
    scope:true,
    templateUrl: "directives/boolKV/boolKV.html",
    link: function($scope, $element, $attr) {
        ...
        var kv = new BAKV({target: cv[0].id, expr: expr});
        $scope.customLayers = kv.colorMap.layers;
        ...
        $scope.checkResult = function(){console.log("it works!");};
});

Does someone have an idea? Thank you very much!

Isn't it because you populate the data when the directive is already being rendered? See: http://stackoverflow.com/a/19261577/2747533 — MirMasej, Jan 17 '17 at 19:01

score 0 · Answer 1 · answered Jan 17 '17 at 19:13

Thank you MirMasej!

You were right, I was calling it after render. Maybe because I've used the EaselJs Library for canvas. I wanted to get the update after click on a block inside this canvas.

I solved it by adding, if someone has a better idea I would try it:

kv.colorMap.onChangedLayer = function(layer) {
      $timeout(function(){
            $scope.$apply();
       });
};

Im calling this onChangedLayer event after changing the data inside the colorMap object.

AnguarJs: ng-repeat only work after clicked button inside directive

1 Answers1