初始化AngularJS控制器一些HTML追加到DOM后 [英] Initialize AngularJS controller after append some html into DOM

问题描述

有没有办法如何使用$从纯JavaScript编译？我基本的复配javascript和地方我使用的角度并不能找到一种方法如何做这样的事情： HTTP ：//jsfiddle.net/DavidSlavik/bFdcJ/1/

我想我需要使用$编译，但来自地方没有任何范围。

  angular.module（'对myApp'，[]）;功能ExpensesCtrl（$范围）{    //下面是一些主站功能...}
$（函数（）{   //下面是从剃刀处理我的MVC动作返回HTML Ajax的功能
   //这里我没有使用AngularJS和范围...
   VAR htmlFromAjax ='＆LT; D​​IV ID =mapOrderNG控制器=排序＆GT;＆LT; D​​IV NG重复=项SortItems中＆GT; {{item.Title}}＆LT; / DIV＆GT;＆LT; / DIV＆GT;';
   $（身体）追加（htmlFromAjax）。}）;功能排序（$范围，$ HTTP，$元素）{    //这里是阿贾克斯函数返回JSON对象。例如，它被注释掉，范围使用的静态变量SortItems。
    //$http.get('someUrlWitchReturnsJsonObject'）
    // .success（函数（五）{
    // $ scope.SortItems = E;
    //}）;    $ scope.SortItems = JSON.parse（'[{标题：DDDDDDD，的azazaz：5，订单式：0}，{标题：Moje mapa\",\"MapId\":3,\"Order\":2},{\"Title\":\"asdas\",\"MapId\":4,\"Order\":3},{\"Title\":\"asds\",\"MapId\":7,\"Order\":4},{\"Title\":\"Pokus\",\"MapId\":8,\"Order\":5},{\"Title\":\"Hello世界!!!，的azazaz：1，订单式：10}]'）;
 

解决方案

  angular.bootstrap（$（＃targetElmForApp）[0]，[对myApp]）;
 

说明：

  angular.bootstrap（rootElementForApp，arrayOfModulesForTheApp）
 

第一个参数设置的应用程序，这是你将使用 NG-应用指令，否则做什么的根元素。

第二参数是定义应用程序模块的列表。这通常是在其中应用程式定义的单个模块。

所以，我们所做的是一样的：

 ＆LT; D​​IV ID =targetElmForAppNG-应用=对myApp＆GT;＆LT; / DIV＆GT;
 

请参阅：结果
http://docs.angularjs.org/api/angular.bootstrap 结果
http://docs.angularjs.org/guide/bootstrap

Is there a way how to use $compile from pure javascript? I'm combinating basic javascript and places where I'm using Angular and can't find a way how to do something like this: http://jsfiddle.net/DavidSlavik/bFdcJ/1/

I think I need use $compile but from place where is no any scope.

angular.module('myApp', []);

function ExpensesCtrl($scope) {

    // Here are some master functions...    

}    


$(function () {

   // Here is the Ajax function that returns html from my MVC action processed with Razor
   // Here I'm not using AngularJS and scopes...
   var htmlFromAjax = '<div id="mapOrder" ng-controller="sortable"><div ng-repeat="item in SortItems">{{item.Title}}</div></div>';
   $('body').append(htmlFromAjax);

});

function sortable($scope, $http, $element) {

    // Here is the Ajax function that return JSON object. For example it is commented and used static variable SortItems in scope.
    //$http.get('someUrlWitchReturnsJsonObject')
    //    .success(function (e) {
    //        $scope.SortItems = e;
    //    });

    $scope.SortItems = JSON.parse('[{"Title":"ddddddd","MapId":5,"Order":0},{"Title":"Moje mapa","MapId":3,"Order":2},{"Title":"asdas","MapId":4,"Order":3},{"Title":"asds","MapId":7,"Order":4},{"Title":"Pokus","MapId":8,"Order":5},{"Title":"Hello world!!!","MapId":1,"Order":10}]');

解决方案

angular.bootstrap($("#targetElmForApp")[0], ["myApp"]);

Explanation:

angular.bootstrap(rootElementForApp, arrayOfModulesForTheApp)

The first parameter sets the root element for the app, which is what you would do by using ng-app directive otherwise.

The second parameters is a list of modules that defines the application. This is typically a single module in which the app is defined.

So what we did is the same as:

<div id="targetElmForApp" ng-app="myApp"></div>

see:
http://docs.angularjs.org/api/angular.bootstrap
http://docs.angularjs.org/guide/bootstrap

这篇关于初始化AngularJS控制器一些HTML追加到DOM后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！