CODEWITHSUNDEEP
javascriptangularjs
Rowan Taylor
Rowan Taylor

Reputation: 43

Refresh Angular Directive from Controller

I searched about how can I refresh or call link function from controller. I got some solutions and applied on my directive but its not working. Here is my directive code

(function() {
'use strict';

angular
    .module('app.viewReport')
    .directive("directive", directive)

    function directive() {
        return {
            restrict: "A",
            scope: {
                data: "="
            },
            link: function(scope, ele, attrs) {
                Some Code
            }
        };
    } })();

Here is my html which I used to call directive

<div directive
                     data-data="comboData"
                     data-type="line"
                     data-xkey="year"
                     data-ykeys='["Accpeted", "Bed Assigned", "Patient No-Show"]'
                     data-labels='["Value A", "Value B", "Value C"]'
                     data-line-colors='["#8170CA","#E87352","#60CD9B"]'
                     data-line-width="2"
                     ></div>

I want to update directive when I load data from controller throguh ajax. Here is my controller function. I define hard coded values in ajax but it is not also not working. Please help me. Thanks in advance

$http.get(serviceUrl).success(function (data, status, headers, config) {
                      $scope.comboData = [{
        year: "2008",
        "Accpeted": "20",
        "Bed Assigned": "16",
        "Patient No-Show": "12"
    }, {
        year: "2009",
        "Accpeted": "10",
        "Bed Assigned": "22",
        "Patient No-Show": "30"
    }, {
        year: "2010",
        "Accpeted": "5",
        "Bed Assigned": "14",
        "Patient No-Show": "20"
    }, {
        year: "2011",
        "Accpeted": "5",
        "Bed Assigned": "12",
        "Patient No-Show": "19"
    }

    ];
        });

Upvotes: 1

Views: 2389

Answers (1)

georgeawg
georgeawg

Reputation: 48968

You need to put a $watchCollection on the data array.

angular
    .module('app.viewReport')
    .directive("directive", directive)

    function directive() {
        return {
            restrict: "A",
            scope: {
                data: "="
            },
            link: function(scope, ele, attrs) {
                scope.$watchCollection("data", function (newArray) {
                    Some Code
                });
            }
        };
    } })();

For more infomation, see AngularJS $rootScope.scope API Reference -- $watchCollection.

The Three Watch Depths of AngularJS

-- AngularJS Developer Guide - Scope Watch Depths

Upvotes: 2

Related Questions