使用js bookmarklet制作角度应用程序

时间:2013-05-22 12:27:34

标签: javascript angularjs bookmarklet

我正在尝试通过点击JS书签来制作一个angularjs应用程序。

问题是ng-controller无法通过角度识别并抛出此错误:

Error: Argument 'LDController' is not a function, got undefined

首先我定义ng-app并使用具有相同名称的angular.module,这有效,我得到了<html ng-app="bookmarklet">。 然后我加载一个名为application.js的外部文件。 app.controller('LDController', ..)在此文件中定义!

我做错了什么?这是js bookmarklet代码:

function loadApp() {
  document.getElementsByTagName('html')[0].setAttribute('ng-app', 'bookmarklet');

  var div = document.createElement('div');
  div.setAttribute('ng-controller', 'LDController');
  div.innerHTML = '';
  document.body.appendChild(div);

  var js = document.createElement('script');
  js.innerText = "var app = angular.module('bookmarklet', []);";
  document.body.appendChild(js);

  js = document.createElement('script');
  js.setAttribute('src', 'http://example.org/js/application.js');
  document.body.appendChild(js);
}

(function () {
  if (typeof angular === 'undefined') {
    js = document.createElement('script');
    js.setAttribute('src', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js');
    js.onload = loadApp;
    document.body.appendChild(js);
  }
  else {
    loadApp();
  }
}());

2 个答案:

答案 0 :(得分:3)

我一直在想,你通过添加ng-app指令手动初始化Angular。执行此操作的规定方法是不插入ng-app,而是在设置其他所有内容后调用相应元素上的angular.bootstrap。例如:

angular.element(document).ready(function() {
    angular.bootstrap(document, ['bookmarklet']);
}

有更多信息here

答案 1 :(得分:2)

所以我已经解决了,感谢Ram Rajamony

这是解决方案的主旨:https://gist.github.com/lpsBetty/5636338