CODEWITHSUNDEEP
angularjsangular-directive
Smeegs
Smeegs

Reputation: 9224

How do I update a scope attributes in the link method?

This code is just a test that I'm putting together so I can understand the logic. Basically what I want to happen is to get a value passed into the directive. Based on that value, I want to add several attributes to the scope.

This first test is just to update the attribute that was already passed in.

Directive:

angular.module('bd.common')

    .directive('bdPopoverLegend', function () {
        return {
            restrict: 'AE',
            replace: true,
            scope: {
                legendInfo: '=info'
            },
            templateUrl: '/bd/common/ctl/bdPopoverLegend.html',
            link: function (scope, element, attrs) {
                scope.legendInfo.test = 'hello world 4';
            }
        };
    });

Template:

<div>{{legendInfo.test}}</div>

Calling the Directive:

<div bd-popover-legend="" info="{test: 'hello world 3'}">

The value never changes, it stays as 'hello world 3' and not 'hello world 4'

Upvotes: 0

Views: 57

Answers (1)

ojus kulkarni
ojus kulkarni

Reputation: 1907

Try this:

.directive('bdPopoverLegend', function () {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            legendInfo: '=info'
        },
        templateUrl: '/bd/common/ctl/bdPopoverLegend.html',
        link: function (scope, element, attrs) {

          scope.$watch('legendInfo', function (watchInfo) {
              watchInfo.test = 'hello world 4';
          });

        }
    };
});

Upvotes: 1

Related Questions