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（＆＃39;＃divid＆＃39;））;

myEl.prepend（＆＃39;您好＆＃39）;

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

Angular JS - 从指令

1 个答案: