CODEWITHSUNDEEP
javascriptangularjs
Maximus Dredoff
Maximus Dredoff

Reputation: 306

Error: [$compile:nonassign] Expression 'undefined' in attribute [ATTRIBUTENAME] used with directive '[DIRECTIVENAME]' is non-assignable?

When I'm trying to transform date inside the directive's body I get error:

Error: [$compile:nonassign] Expression 'undefined' in attribute [ATTRIBUTENAME] used with directive '[DIRECTIVENAME]' is non-assignable!

I am using angular version 1.4.14

Expected result: in my template directive will return class name -

div class="news-block-container sm-padding-right"

What can cause this problem? Thanks for your answer

here is an example of my code: 

'use strict';

angular.module('test.directives')
    .directive('test', function () {
        var templatePath = "/views/templates/testTemplate.tmpl.html";
        return {
            restrict: 'E',
            scope: {
                position: '=',
            },
            templateUrl: templatePath,
            link: function (scope, element, attrs) {
                scope.$watch('position', function () {
                        if (scope.position === "left") {
                            scope.position = "sm-padding-right";
                        }
                        else {
                            scope.position = "sm-padding-left";
                        }
                    });
            }
        }

    });
view - directive usage
 <test-template position="'left'"></test-template>



//!TEMPLATE! - testTemplate
<div>
    <a href="{{#}}">
        <div class="news-block-container  {{position}}">           
        </div>
    </a>
</div>

Upvotes: 0

Views: 1565

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41377

Just use ng-class directive to assign class dynamically 

<div>
    <a href="{{#}}">
        <div class="news-block-container" ng-class="position">           
        </div>
    </a>
</div>

change angular.module('test.directives')

to this angular.module('test.directives',[])

Also remove the curly brackets around hash in template

change <a href="{{#}}">

to this <a href="#">

Upvotes: 1

Related Questions