从字符串运行Angular代码

时间:2016-07-01 09:22:34

标签: javascript angularjs

我想在codepen或jsfiddle中获得类似的结果,你可以输入一些代码然后在之后执行。

http://jsfiddle.net/Lvc0u55v/6313/

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

// Lists all registered Directives for any angular module..
function Directives(module) {
    var directives = [];
    var invokes = angular.module(module)._invokeQueue;
    for (var i in invokes) {
        if (invokes[i][1] === "controller") directives.push(invokes[i][2]);
    }
    return directives;
}
myApp.controller('myCtrl',function($scope,$compile,$timeout,$rootScope,$injector){
  var module = "angular.module('myApp').controller('myDynamicCtrl', function($scope) {console.log('hello');window.myScope = $scope; $scope.hello = 'User!';});";
  (new Function(module)());

  // I can access the new controller via:
  myApp._invokeQueue[1][2][1]($scope);
  console.log(window.myScope);

  var html = angular.element("<div ng-controller='myDynamicCtrl'; id='appended'>Hello {{hello}}</div>");
  angular.element(document.getElementById('target')).append(html);

  var scope = angular.element(document.getElementById('appended')).scope();
  angular.element(document.getElementById('appended')).replaceWith($compile(html)(window.myScope));  


});

我可以执行字符串中定义的控制器,并将其正确注册到我的角度模块。

但是,如果我将它链接到html元素,则新创建的控制器是未定义的。

我想为指令实现相同的结果(将指令定义为字符串,执行它,并用它编译html)。

1 个答案:

答案 0 :(得分:0)

我让它工作(包括控制器和指令): 手动引导第一个应用程序而不是使用ng-app为我做了诀窍。

http://jsfiddle.net/Lvc0u55v/6318/