Angularjs: bracket missing in attribute

Question

Im doing Angularjs code and have a strange error:

"Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{asset.sn}}] starting at [{asset.sn}}]. http://errors.angularjs.org/1.3.11/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Basset.sn%7D%7D&p4=%7Basset.sn%7D%7D minErr/<@http://localhost:8000/app/vendor/angular/angular.js:63:12

What it means and why it's displyed?

HTML code:

<table class="table" ng-table="tableParams" show-filter="false" ng-class="{loadingtable : loading}" ng-show="showResults">
                <tbody>
                    <tr ng-repeat="asset in assets">
                        <td class="col-md-4" data-title="'Serial Number'" header-class="text-left" search-word-marker param="{{asset.sn}}"></td>
                        <td class="col-md-4" data-title="'Asset Name'" accesskey="" header-class="text-left" search-word-marker param="{{asset.asset_name}}"></td>
                        <td class="col-md-2" data-title="'Asset Type'" header-class="text-left">{{asset.asset_type}}</td>
                        <td class="col-md-2" data-title="'Tags'" header-class="text-left">{{asset.tags}}</td>
                        <td class="col-md-1">
                            <div class="btn-group">
                                <span>
                                    <button type="button" class="btn btn-sm btn-primary" ng-click="viewAsset(asset.sn);">{{'VIEW' | translate}}</button>
                                </span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>

DIRECTIVE code:

Application.Directives.directive('searchWordMarker', ['$log', '$rootScope', function ($log, $rootScope) {
    return {
        restrict: 'A',
        scope: {
            param: '='
        },
        //template: "{{myNewString}}",
        //replace: false,
        link: function (scope, el, attr) {

            var myString = attr.param;

            var searchWord = $rootScope.searchWord;

            var regex = new RegExp(searchWord, "g");
            var myNewString = myString.replace(regex, "<B>" + searchWord + "</B>");


            el[0].innerHTML = myNewString;


        }
    }
}]);

Videlicet

search-word-marker param="asset.sn" you need not give the {{}} – Exclamation

It is not working: it takes "asset.sn" as normal text and it's dieplayed as text: asset.sn. – Videlicet

Answer 1

You're trying to do a 2-way binding (param : "=") to what's written in param, but that is not an object or a variable, it's an expression. Either lose the {{}} or change your scope.param binding to be to a string:

scope: {
     param: '@'
},

Godard

Thanks it works:). Why i was not able to do 2 way binding ... {{asset.sn}} seems to be (temporary) variable.? – Videlicet

@Videlicet 2 way binding works when you can bind to a variable/object.. {{}} is an expression and cannot be binded to. {{asset.sn}} evaluates just to a string at the end of day. – Godard

This is what I was looking for... for 3 hours, thanks @OmriAharon :) – Mantoman

@AlexSzabó Ouch.. glad it helped :) – Godard

Answer 2

 <table class="table" ng-table="tableParams" show-filter="false" ng-class="{loadingtable : loading}" ng-show="showResults">
            <tbody>
                <tr ng-repeat="asset in assets">
                    <td class="col-md-4" data-title="'Serial Number'" header-class="text-left" search-word-marker param="asset.sn"></td>
                    <td class="col-md-4" data-title="'Asset Name'" accesskey="" header-class="text-left" search-word-marker param="asset.asset_name"></td>
                    <td class="col-md-2" data-title="'Asset Type'" header-class="text-left">{{asset.asset_type}}</td>
                    <td class="col-md-2" data-title="'Tags'" header-class="text-left">{{asset.tags}}</td>
                    <td class="col-md-1">
                        <div class="btn-group">
                            <span>
                                <button type="button" class="btn btn-sm btn-primary" ng-click="viewAsset(asset.sn);">{{'VIEW' | translate}}</button>
                            </span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

Exclamation