Angular JS - 从指令加载 templateUrl

Question

我正在从指令“addMission”加载模板 html。我想在单击按钮时在主 html 页面上添加一些 DOM 元素，要添加的 DOM 元素写在名为“newmission.html”的模板 html 中，单击按钮时会调用“addmission”函数。在此函数中，我使用“.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>

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

Answer 1

将代码从 $compile 改为使用类似

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

myEl.prepend('Hi');

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