Jquery Angular JS-从指令加载templateUrl

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

我做了一个小规模的，它的工作

但现在，当我在我的项目中这样做时，它不起作用。我到现在为止所做的一切如下所示，请帮助我找出我做错了什么

我的控制器和指令

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

“严格使用”；
var edit_vision_mission=angular.module（'myApp.edit_vision_mission'，['ngRoute'，'myApp.mission_vision']）；
编辑_vision_mission.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（“/edit_vision_mission”{
templateUrl:'partials/edit_vision_mission/edit_vision_mission.html'，
控制员：“编辑愿景任务TRL”
});
}]);
编辑任务控制器（'edit_vision_missionCtrl'、['$scope'、'$http'、'getMissionDataService'、'$compile'，函数（$scope、$http、getMissionDataService、$compile）{
$scope.visiontext=“这里是vision的内容”；
getMissionDataService.getMissionData（）成功（函数（响应）{
$scope.missions=响应；
$scope.len=$scope.missions.length；
});
$scope.updatevision=函数（视觉）{
$scope.visiontext=vision；
};
$scope.addmissionpoint=函数（missionid）{
var missionpointdata=提示（“请输入详细信息”，“任务点”）；
if（missionpointdata！==null）{
jsonData.addmId.push（missionid）；
jsonData.addpValue.push（missionpointdata）；
}
};
$scope.addmission=函数（）{
var compiledHTML=$compile（“”）（$scope）；
$（“.pageheading”）.append（编译的HTML）；
};
}]);
编辑任务指令（'addMission'，function（））{
返回{
templateUrl:'newmission.html'
};
});

单击按钮时，将调用上述代码中的addmission函数。 单击按钮和添加dom的HTML

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

---

该div中的实际代码未加载，请帮助我查找代码中的错误。

将代码从$compile更改为使用like

var myEl=angular.element（document.querySelector（'#divID'）

myEl.prepend（'Hi'）

---

将代码从$compile更改为使用like

var myEl=angular.element（document.querySelector（'#divID'）

myEl.prepend（'Hi'）

---

也许可以尝试用上面的代码制作一个plunker示例-这将有助于诊断问题。我将不得不进一步查看代码，但一开始，我就注意到您在控制器中使用了

$compile

。坏主意。您应该在指令中处理DOM操作；这就是它们的目的。你能告诉我如何在plunker中做到这一点吗……做上述类型的DOM操作，我正在努力……将代码从$compile改为使用var myEl=angular.element（document.querySelector（'#divID'））将非常有帮助；myEl.prepend（'Hi
'）；也许可以尝试用上面的代码制作一个plunker示例-这将有助于诊断问题。我将不得不进一步查看代码，但一开始，我就注意到您在控制器中使用了

$compile

。坏主意。您应该在指令中处理DOM操作；这就是它们的目的。你能告诉我如何在plunker中做到这一点吗……做上述类型的DOM操作，我正在努力……将代码从$compile改为使用var myEl=angular.element（document.querySelector（'#divID'））将非常有帮助；myEl.prepend（'Hi
'）；