Issue with append/prepend in Angular Js

Question

Below is my code Example, in the code am trying to append DIV to label. what i need exactly is "I Don't need DIV element after label tag" but i need to append some html after to label tag.

<!DOCTYPE html>
    <html>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
    <script>
    var app = angular.module('myApp', ['ngSanitize']);

    app.controller('CartController', function($scope) {
                $scope.title = "<b>Hello world</b>";
                $scope.test = "How are you..!";
                $scope.AppendText = function() {
                   var myEl = angular.element( document.querySelector('#divID'));
                   myEl.append('Hi<br/>How are U..?');     
                }
            });
    </script>

    <body ng-app="myApp" >
        <div ng-controller="CartController">
           <label ng-bind-html="title" ng-init="AppendText()">
            <div id="divID"></div>
           </label>
        </div>
    </body>
    </html>

You don't need Angular if you don't use it. With this approach you have taken your app will turn into very low-quality mass of bad practices. Before you went too far I suggest learning *best* practices: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — dfsq, Nov 18 '15 at 07:56
Don't use an AngularJS controller to generate HTML code. Use the view for that, with directives. The controller shouldn't do DOM manipulation. It should update the model, and the view will update itself automatically based on the model. `ng-bind-html`, dom manipulation in the controller, `ng-init`: those are 3 things you should avoid. — JB Nizet, Nov 18 '15 at 07:57

score 1 · Answer 1 · answered Nov 18 '15 at 08:08

This can be achieved better using directives. It is not good practice to alter DOM element in controller. Directives are created to make operations on dom. All the dom alteration should handle using directive. Inside detective you can access scope, element and attribute easily. Read more here https://docs.angularjs.org/guide/directive

I would suggest below solution

var app = angular.module('myApp',[]);

app.controller('CartController', function($scope) {
                $scope.title = "<b>Hello world</b>";
                $scope.test = "How are you..!";                    
            });

app.directive('appendText',function () {
  return {
        restrict: 'A',
        link: function(scope, elm, attr) {          
            elm.html('Hi<br/>How are U..?');
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>


    <body ng-app="myApp" >
        <div ng-controller="CartController">
           <label> {{title}}
            <div id="divID" append-text></div>
           </label>
        </div>
    </body>

Issue with append/prepend in Angular Js

1 Answers1