Modify content on a link using AngularJS

Question

Modify content on a link using AngularJS

Currently, my setup looks like this:

HTML Code

<div ng-app="home" ng-controller="customersCtrl"> 
    <div ng-bind-html="home" id="content">{{content}}</div>
</div>

JS Code

angular.module('home', []).controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
    $http.get("http://www.example.de/home/").success(function (response) {
        document.getElementById("content").innerHTML = response;
    });
}]);

Everything is working fine, but now I want to change the content when a link is clicked, like this:

<a href="#home/">Home</a> | <a href="#user/">User</a>

Does anyone know how I can achieve this?

javascript angularjs

Answer 1

Answer №1

If you're looking to easily change text using a simple function call, my personal recommendation would be to use ng-click="" instead of <a href="#"></a>. Including # is typically used for route changes in AngularJS.

Based on your explanation, it seems like you're fetching some HTML codes from another website and suddenly Angular stops working. When using ng-bind-html, you'll need to 'sanitize' it as it is considered unsafe to bind HTML code directly.

Here is the code that should work for you:

HTML:

<div ng-app="myApp" ng-controller="customersCtrl" ng-init="content='test'"> 
    <div ng-bind-html="content | sanitize"></div>
    <a ng-click="changeContent('home')">Home</a> | <a ng-click="changeContent('user')">User</a>
</div>

Javascript:

angular.module('myApp', [])
    .filter('sanitize', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }])

    .controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.changeContent = changeContent;

        function changeContent (content){
            if(content === 'home'){
                $http.get("http://www.example.de/home/").success(function (response) {
                    $scope.content = response;
                });            
            } else {
                // ......
            }
        }
    }]);

Edit: Updated spacing and corrected typos

Answer 2

If you're looking to easily change text using a simple function call, my personal recommendation would be to use ng-click="" instead of <a href="#"></a>. Including # is typically used for route changes in AngularJS.

Based on your explanation, it seems like you're fetching some HTML codes from another website and suddenly Angular stops working. When using ng-bind-html, you'll need to 'sanitize' it as it is considered unsafe to bind HTML code directly.

Here is the code that should work for you:

HTML:

<div ng-app="myApp" ng-controller="customersCtrl" ng-init="content='test'"> 
    <div ng-bind-html="content | sanitize"></div>
    <a ng-click="changeContent('home')">Home</a> | <a ng-click="changeContent('user')">User</a>
</div>

Javascript:

angular.module('myApp', [])
    .filter('sanitize', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }])

    .controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.changeContent = changeContent;

        function changeContent (content){
            if(content === 'home'){
                $http.get("http://www.example.de/home/").success(function (response) {
                    $scope.content = response;
                });            
            } else {
                // ......
            }
        }
    }]);

Edit: Updated spacing and corrected typos

Answer 3

Answer №2

To easily bind content, you can utilize double curly braces {{}} in Angular, also referred to as double binding

 <div ng-app="home" ng-controller="customersCtrl"> 
        <div ng-bind-html="home" id="content">{{content}}</div>
    </div>

<a ng-href="{{yourLink}}">Home</a>
Just to showcase 
<button ng-click="yourLink = 'foo'">change the link</button>

Similarly, Angular scope can be used here to update the view

angular.module('home', []).controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $http.get("http://www.example.de/home/").success(function (response) {
            $scope.content = response;
        });
    }]);

How does Angular update the view or content?

Angular utilizes watches to monitor all scopes. When a value is passed to the scope, Angular triggers the digest cycle to update the view or its content

To use single binding, simply add :: to the expression {{::yourLink}} This reduces Angular's watch overhead and improves performance

Answer 4

To easily bind content, you can utilize double curly braces {{}} in Angular, also referred to as double binding

 <div ng-app="home" ng-controller="customersCtrl"> 
        <div ng-bind-html="home" id="content">{{content}}</div>
    </div>

<a ng-href="{{yourLink}}">Home</a>
Just to showcase 
<button ng-click="yourLink = 'foo'">change the link</button>

Similarly, Angular scope can be used here to update the view

angular.module('home', []).controller('customersCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $http.get("http://www.example.de/home/").success(function (response) {
            $scope.content = response;
        });
    }]);

How does Angular update the view or content?

Angular utilizes watches to monitor all scopes. When a value is passed to the scope, Angular triggers the digest cycle to update the view or its content

To use single binding, simply add :: to the expression {{::yourLink}} This reduces Angular's watch overhead and improves performance

Modify content on a link using AngularJS

Answer №1

Answer №2

Similar questions

Restangular is throwing an error because it cannot find the reference for _

Controller encounters a error when requiring a module

Learning the process of utilizing Json in Flot to create visually appealing graphs

Internet Explorer no longer supports SCRIPT tags in AJAX responses

Using Node JS to pass variables to the client

Issue with webpack failing to inject variables

Is it feasible to utilize the Next.js (App Router) Context API to access this context in every fetch request?

Implementing the if/shim binding in Knockout.js

Error message: The Javascript Electron app is unable to find the node-fetch module when

Guide on installing React packages during runtime

Disallow/bound the position of the marker on Google Maps

Steps for building JSX with a loop

jQuery Toggle and Change Image Src Attribute Issue

Create an excel spreadsheet using HTML tables with the help of jQuery

Would parallax stars be overwhelming for a webpage?

Choose various selections from a drop-down menu using AngularJs

An error was encountered involving an unexpected token < at the beginning of a JSON file while using express with firebase

Bluebird Enthusiastically Predicting the Outcome of a Complex Operation

The middleware in Express.js is failing to execute the next function

Chrome on OSX Mavericks threw a RangeError because the maximum call stack size was exceeded