与DOJO应用程序成角度

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

这个plunkr需要从角度控制器显示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，它试图加载角度模块并使用控制器中的变量。

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

简单的角度模块和控制器显示你好世界

(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");
        }])
})();

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

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

使用dijit/registry查看小部件的初始化情况。

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

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

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

https://jsbin.com/joyuhesapo/edit?html，控制台，输出

在实际应用程序中，您应该使用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>

相关内容

最新更新

热门标签：