gpt4 book ai didi

javascript - Angular 与 DOJO 应用程序

转载 作者:行者123 更新时间:2023-11-27 23:05:56 24 4
gpt4 key购买 nike

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

这个 plunkr 需要从 Angular Controller 显示 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">

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

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

用于显示 hello world 的简单 Angular 模块和 Controller

(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,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>

关于javascript - Angular 与 DOJO 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36580110/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com