Angular JS - 从指令中加载templateUrl

Question

我从指令“addMission”加载模板html。我想在点击一个按钮的时候在主html页面上添加一些DOM元素，当点击按钮“addmission”函数被调用时，要添加的DOM元素被写入名为“newmission.html”的模板html中。在这个函数中，我使用“.append”来附加一个div元素和我的自定义指令属性。

我做了这个小规模here和它的工作

但现在，当我在我的项目这样做是行不通的。下面显示了我迄今为止所做的事情，请帮助我找出我做错了什么。

我的控制器和指令

'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' 
    }; 
}); 

按钮被点击时在上面的代码中addmission函数被调用。 单击该按钮的HTML以及要添加dom的位置。

<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> 

与“pageheading”类的div是我想添加DOM元素的位置。模板html很简单。

<p>Vikram</p> 

当我点击该按钮时，被加载一些HTML代码

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

在该分区的实际代码没有加载，请帮我找到我的代码错误。从$

Answer 1

更改代码编译为使用像

变种MYEL = angular.element（document.querySelector（ '#divID'））;

myEl.prepend（'Hi'）;

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