AngularJS Scope as HTML attribute value

Question

I am trying to use an AngularJS $scope as an HTML attribute rather than viewable text.

main.js

var myApp = angular.module('myApp');

myApp.controller("buttonCtrl", ['$scope', function($scope){

$scope.johnny = [
    {quote: 'Anything for My Princess', controller: 'Princess'}
];

}]);

page1.html

<button ng-repeat="button in johnny" 
    ng-class="dynamic" 
    class="topcoat-button"
    ng-controller="{{button.controller}}"   <---- this is what does not work 
    ng-click="play()">
    {{button.quote}}
</button>

How can I fix this so I can add these variables as an attribute value.

Thanks

possible duplicate of AngularJS: dynamically assign controller from ng-repeat — karaxuna
– karaxuna, Commented Mar 23, 2014 at 8:08

Zoey Mertes · Accepted Answer · 2014-03-23 08:10:33Z

1

Angular.js is a bit weird when doing this, but this should work. Also you're using ng-repeat wrong, but it's fixed below.

<button ng-repeat="johnny in buttons" 
    ng-class="dynamic" 
    class="topcoat-button"
    ng-controller="this.johnny.controller"
    ng-click="play()">
    {{johnny.quote}}
</button>

answered Mar 23, 2014 at 8:10

Zoey Mertes

3,13421 silver badges23 bronze badges

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

3 Comments

benjipelletier Over a year ago

Hi, Thank you for responding. when I put in this.johnny.controller the button I see {{johnny.quote}} instead of the value. Also, I can only see the buttons if johnny is after "in".

benjipelletier Over a year ago

Ah yes, it is buttons in johnny, but I need to use {{button.quote}}; however, ng-controller is not working. I have updated my question so it is correct.

benjipelletier Over a year ago

Ohh, I took out the quotes on Princess and that solved it. Thank you very much for leading me to the answer!

Collectives™ on Stack Overflow

AngularJS Scope as HTML attribute value

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related