Angular 使用 DOJO 应用程序

Question

我需要使用 Angular 编写现有 DOJO 应用程序的一部分。我创建了一个 plunkr http://plnkr.co/edit/8pgdNwxFoxrDAQaQ4qfm?p=preview。这不是加载 angular 模块。我做错了什么？

这个 plunkr 需要显示来自 angular 控制器的 hello World。

 <div data-dojo-type="dijit/layout/ContentPane"
             data-dojo-props='isLayoutContainer: "true"'
             title="Testing Angular with DOJO"
             id="targetID"
             selected="false"             
             href="page.html">

我们的应用程序在同一页面中还有其他使用 DOJO 的 div，因此，我遵循相同的机制来包含 page.html，它会尝试加载 angular 模块并使用来自控制器的变量.

<body ng-app="myApp">
  <div ng-controller="myAppController as myAppCtrl">
    angular content here... {{ myAppCtrl.hello }}
  </div>
</body>

用于显示 hello world 的简单 angular 模块和控制器

(function () {
    'use strict';

console.log("inside myApp js");

angular.module('myApp', [])

        .run([function () {
            console.log("inside angular module");
        }])

        .controller('myAppController', [function () {
          var self = this;
          self.hello = "Hello World!"
          console.log("inside angular controller");
        }])
})();

Answer 1

您需要使用 dojo/parser 才能将经过特殊修饰的节点（在您的 HTML 标记中）转换为 Dijits。

在下面的代码中你可以看到它在调用parser.parse()时的用法。

使用 dijit/registry 查看您的小部件已初始化。

问题代码包含一些未在模块 ContentPane 中定义的属性，因此我在下面的代码中删除了它们。

请参考官方API查看方法和属性可用于ContentPane。

下面是一个工作示例，请查看控制台，您可以在其中看到两个准备在 Dojo 中使用的小部件。

https://jsbin.com/joyuhesapo/edit?html,console,output

在您的实际应用程序中，您应该使用 dojo/parse.

解析 HTML 标记（我相信您正在使用 angular 创建它）

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script data-dojo-config="async: true" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
    <script>
        require([
            "dojo/parser",
            "dijit/layout/ContentPane",
            "dijit/form/Button",
            "dijit/registry",
            "dojo/domReady!"], function (
            parser,
            ContentPane,
            Button,
            registry
            ) {
                parser.parse().then(function () {
                    var widgets = registry.toArray();
                    widgets.forEach(function(widget){
                      console.log(widget.id);
                    });
                });


            });

    </script>

</head>

<body>
    <h1>Hello Angular + DOJO!</h1>
    <button data-dojo-type="dijit/form/Button" type="button"> Just an example Click! </button>
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Testing Angular with DOJO', isLayoutContainerIndicates : true">
        Panel Content
    </div>
</body>

</html>

Angular 使用 DOJO 应用程序

Angular with DOJO application

javascript

dojo

angularjs