How to provide value of $scope variable as string in HTML?

Question

Yeah, This is weird issue.

I am adding code to existing code base where there is a directive

<my-progress ng-progress="processingReport" msg="someString"></my-progress>

The problem is that msg needs to be dereferenced string.

I have a scope variable as $scope.myStatus but providing msg={{myStatus}} is not producing anything

Is there a way to dereference the value of $scope.myStatus so that msg only receives its value?

UPDATE

The directive looks like

.directive('myProgress', function($compile) {
      return {
        restrict: 'E',
        link: function(scope, element, attrs){
          var msg = attrs.msg?attrs.msg: "{{"+attrs.ngMsg+"}}";
            var template = '<p ng-if="'+ attrs.ngProgress +'"><img src="img/busy-20.gif" alt=""> '+ msg +'</p>';
            var el = $compile(template)(scope);
            element.replaceWith(el);
          }
      };
    })

UPDATE 1
As per @charlietfl recommendation, the following worked well

In Controller

$scope.runningStatus = {progressStatus: 'Not Started'};

In HTML

<my-progress ng-progress="processingReport" ng-msg="runningStatus.progressStatus"></my-progress>

Can you post the code of the myProgress directive? It depends on the type of binding. — floribon
– floribon, Commented May 7, 2015 at 1:19

charlietfl · Accepted Answer · 2015-05-07 01:40:49Z

1

Based on directive code you should be able to use :

ng-msg="myStatus"

Which would get added into the template as an expression

Note the line in directive:

var msg = attrs.msg?attrs.msg: "{{"+attrs.ngMsg+"}}";

which looks for one or the other attribute and treats them differently

edited May 7, 2015 at 1:40

answered May 7, 2015 at 1:31

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

daydreamer Over a year ago

That works, just that the value is passed just once, if value for myStatus changes, it is never updated on the screen. I do not know how to solve this

charlietfl Over a year ago

try making your scope model an object with a property myStatus .... $scope.someObj={myStatus:'som value'} then ng-msg="someObj.myStatus"

daydreamer Over a year ago

Not sure if I followed you, but the way it looks is ` $scope.updateStatus = function(responsePayload) { var text = responsePayload.result['reportStatus']; $scope.progressStatus = text; . This is the first time $scope.progressStatus` is used

charlietfl Over a year ago

always best to use objects on scope when you can ..instead of primitives

floribon · Accepted Answer · 2015-05-07 01:26:43Z

1

The directive is kind of a hack and should be rewritten, but as is it should accept an interpolated expression:

<my-progress ng-progress="processingReport" msg="{{myStatus}}"></my-progress>

Don't forget the double quotes " around {{myStatus}}

If it still doesn't work, could you test that your scope is okay by adding this test element just after the directive one:

<div>{{myStatus}}</div>

answered May 7, 2015 at 1:26

floribon

19.2k5 gold badges56 silver badges68 bronze badges

1 Comment

daydreamer Over a year ago

That works, just that the value is passed just once, if value for myStatus changes, it is never updated on the screen. I do not know how to solve this

Collectives™ on Stack Overflow

How to provide value of $scope variable as string in HTML?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related