Question

我是Angularjs和Dojo-Toolkit的新手，所以请原谅我的新手。
我的页面中有一个元素，我可以毫无问题地绑定到我的模型：<input type="text" ng-model="startDateRange"></input>这可以按预期工作。

当我更新元素以便它使用Dojo-Toolkit时，绑定似乎被破坏：<input type="text" ng-model="startDateRange" data-dojo-type="dijit/form/DateTextBox"></input>对模型的绑定不再有效。

我不确定我做错了什么。任何帮助，将不胜感激。谢谢。

Answer 1

AngularJS绑定适用于DOM节点，如果移动，删除或替换AngularJS正在观看的DOM节点，则代码将不再起作用。

正如Thomas Kagan所说，Dojo小部件将通过这些小部件模板中提供的DOM节点用data-dojo-type替换DOM节点。这简单地删除了你的绑定，好像它不存在一样。

一个合适的AngularJS解决方案是将Dojo DateTextBox包装在一个指令中，因此AngularJS知道这是封装的，AngularJS只应该通过API（指令的scope）访问该指令。

例如：

myApp.directive("dateTextBox", function($timeout) {
  var link = function(scope, elem, attr) {
    require(["dijit/form/DateTextBox"], function(DateTextBox) {
      var dateTxtBox = new DateTextBox({});
      dateTxtBox.set('value', scope.date);
      dateTxtBox.on("change", function(date) {
        $timeout(function() {
          scope.date = date;
        });
      });
      elem.append(dateTxtBox.domNode);
    });
  };

  return {
    restrict: 'E',
    scope: {
      date: "="
    },
    link: link
  };
});

这只是一个基本的例子，我也做了一个演示，您可以通过运行下面的代码片段来查看。

＆＃13;

angular.module("myApp", []).controller("TestCtrl", function($scope) {
  $scope.date = new Date();
})

.directive("dateTextBox", function($timeout) {
  var link = function(scope, elem, attr) {
    require(["dijit/form/DateTextBox"], function(DateTextBox) {
      var dateTxtBox = new DateTextBox({});
      dateTxtBox.set('value', scope.date);
      dateTxtBox.on("change", function(date) {
        $timeout(function() {
          scope.date = date;
        });
      });
      elem.append(dateTxtBox.domNode);
    });
  };
  
  return {
    restrict: 'E',
    scope: {
      date: "="
    },
    link: link
  };
});

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css" />
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" class="claro">
    <div ng-controller="TestCtrl">
      <date-text-box date="date"></date-text-box><br />
      {{date | date}}
    </div>
  </body>

</html>

＆＃13;

Answer 2

当dojo解析器运行时，它会将输入元素标识为dijit小部件并销毁输入元素，将其替换为dojo小部件，这样ng-model属性将不再存在。我建议使用Dojo的可观察模块进行数据绑定，而不是尝试混合使用角度

对于Dojo DateTextBox，Angularjs绑定似乎被破坏了

2 个答案: