CODEWITHSUNDEEP
angularjsangularjs-directive
mrb398
mrb398

Reputation: 1317

scope.$watch withing a directive returns attribute value of undefined

I am attempting to setup a directive

project.directive('recordView', function () {
    return {
        restrict: 'E',
        scope: {
            recordId: '@'
        },
        templateUrl: '/scripts/templates/record-view-template.html',
        controller: 'RecordViewController',
        link: function (scope, element, attrs) {
            scope.$watch('recordId', function (value) {
                console.log(value);
                if (value) {
                    scope.resp.RecordId = 0
                    scope.resp.RecordId = eval('(' + value + ')');
                    alert(scope.resp.RecordId);
                }
            });
        }
    }
});

I use the directive like this

<record-view recordId="{{currentRecordId}}"></record-view>

Throwing {{currentRecordId}} in my view is proving the correct value is being set, and the directive scope.$watch is correctly triggering when the record id attribute changes, but the console.log is proving the value to be undefined.

I am not sure what I am missing here. I don't know if this matters, but this directive is being used within a separate directive.

Upvotes: 3

Views: 651

Answers (1)

mrb398
mrb398

Reputation: 1317

It turns out angular does not like me calling my directive like this

<record-view recordId="{{currentRecordId}}"></record-view>

Instead it want me to call it like this

<record-view record-id="{{currentRecordId}}"></record-view>

I thought that normalization would allow me to use it like I did, but apparently that isn't the case

Upvotes: 4

Related Questions