CODEWITHSUNDEEP
jqueryangularjs
Vikram Singh Jadon
Vikram Singh Jadon

Reputation: 1047

Angular JS - Loading templateUrl from a directive

I am loading a template html from a directive "addMission". I want to add some DOM elements on the main html page on click of a button, the DOM elements to be added are written in a template html called "newmission.html", when the button is clicked "addmission" function is called. In this function i use ".append" to append a div element with my custom directive property.

I did this on a small scale here and it worked

but now when i am doing this in my project it is not working. what ever i have done till now is shown below, please help me to find what i am doing wrong.

My controller and directive

    'use strict';

var edit_vision_mission = angular.module('myApp.edit_vision_mission', ['ngRoute', 'myApp.mission_vision']);

edit_vision_mission.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/edit_vision_mission', {
    templateUrl: 'partials/edit_vision_mission/edit_vision_mission.html',
    controller: 'edit_vision_missionCtrl'
  });
}]);

edit_vision_mission.controller('edit_vision_missionCtrl',['$scope','$http', 'getMissionDataService','$compile', function($scope, $http, getMissionDataService, $compile) {
    $scope.visiontext = "Here is the content of vision";
    getMissionDataService.getMissionData().success(function(response){
       $scope.missions = response;
       $scope.len = $scope.missions.length;
    });

    $scope.updatevision = function(vision){
        $scope.visiontext = vision;
    };

    $scope.addmissionpoint = function(missionid){

        var missionpointdata = prompt("Please Enter Details", "Mission Point");
        if(missionpointdata !== null){
            jsonData.addmId.push(missionid);
            jsonData.addpValue.push(missionpointdata);
        }
    };
    $scope.addmission = function(){
        var compiledeHTML = $compile("<div add-Mission></div>")($scope);
        $(".pageheading").append(compiledeHTML);
    };
}]);

edit_vision_mission.directive('addMission', function(){
    return {
        templateUrl : 'newmission.html'
    };
});

the addmission function in the above code is called when the button is clicked. the HTML from where the button is clicked and where the dom is to be added.

  <div id="mission_visionpage" ng-controller="edit_vision_missionCtrl">
    <div>
        <a id="savechangesimg" href="#/mission_vision"><img src="assets/img/savechanges.png" style="width: 4%; height: 4%;float: right;"></a>
        <a id="cancelimg" href="#/mission_vision" style=""><img src="assets/img/cancel.png" style="width: 4%; height: 4%;float: right;"></a>
    </div>    
    <div class="pageheading">
        <h2>VISION/MISSION</h2>
    </div>
    <div class="visioncontent box effectvision">
        <div class="boxheader">
            <h2 style="font-family: monospace; color: whitesmoke;"><b>VISION</b></h2>
        </div>
        <div class="boxcontent">

            <div style="padding-top: 20px;">
                <span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;">EDIT VISION</span><br /><input id="visionp" ng-blur="updatevision(visiontext)" type="text" ng-model="visiontext" class="form-control" style="background-color: #e8e8e8; font-family: monospace;">
            </div>
        <div style="padding-top: 35px;">
            <a href="" ng-click="addmission()"><img id="addmission" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a>
        </div>
        </div>
    </div>

the div with the class "pageheading" is where i want to add the DOM elements. the template html is simple.

<p>Vikram</p>

when i click the button, some html code that gets loaded is 

<div add-mission class="ng-scope"></div>

the actual code in that div isn't loading, please help me find the error in my codes.

Upvotes: 1

Views: 375

Answers (1)

Parth Trivedi
Parth Trivedi

Reputation: 3832

Change code from $compile to use like

var myEl = angular.element( document.querySelector( '#divID' ) );

myEl.prepend('Hi');

http://demo.sodhanalibrary.com/angular-jquery/prepend_a.html

Upvotes: 0

Related Questions