问题描述:

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.

网友答案:

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

相关阅读:
Top