CODEWITHSUNDEEP
javascriptangularjsangularjs-controllerangularjs-components
Jimmy Tudesky
Jimmy Tudesky

Reputation: 43

AngularJS - How to change components controller dynamically?

I have an angularJS component and I manually set the url for a link. But I want to change this url after blogposts is loaded in a different method.

HTML:

<a ng-href="{{ $ctrl.readMoreUrl }}" id="readMore" class="read-more" translate="READ_THE_POST" >
READ MORE ON THE BLOG<img src="../../images/assets/arrow-right.svg" 
class="img-responsive arrow-right" alt=""/></a>

Javascript:

function BlogDetailController() {
    var ctrl = this;
    ctrl.readMoreUrl = 'https://mytest-site.com/blogpost/superpost/';
}

    var angularApp = angular.module(

    .component('postDetail', {
        templateUrl: '/javascripts/controllers/blogDetail.html',
        controller: BlogDetailController,
        bindings: {post: '=', indx: '=', title: '='}
    })

And I want to change it in a different function:

$scope.loadpost = function () {
    //I want to change the url here
}

I tried to add a simple eventlistener to the "readMore"s id. But sometimes it works and sometimes it is not... And I think this is not the best way to change the url. So my question is, how can I change the url, whenever I want, after the component started to use the controller?

Upvotes: 1

Views: 184

Answers (1)

Kristof Czimer
Kristof Czimer

Reputation: 41

Have you tried connecting the img source with ng-src? https://www.aspsnippets.com/Articles/Dynamically-change-SRC-of-Image-in-AngularJS.aspx

Upvotes: 0

Related Questions