Question

我想用Node-Red，Node-Red-Dashboard和AngularJS构建一个用户界面。我尝试使用Dashboard的模板节点和一些AngularJS，但它总是无法注册我的控制器，我只是找不到问题。

我最后只是复制了一些简单的示例代码来排除任何错误，但仍然会得到同样的错误。

这是我复制到模板节点的代码：

<div ng-app="myApp" ng-controller="myCtrl"> 
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
<br>
  Full Name: {{firstName + " " + lastName}}

</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
  });
</script>

这是我在控制台中遇到的错误：

app.min.js:140 Error: [$controller:ctrlreg] 
http://errors.angularjs.org/1.5.11/$controller/ctrlreg?p0=myCtrl
  at app.min.js:27
  at app.min.js:112
  at ba (app.min.js:95)
  at n (app.min.js:86)
  at g (app.min.js:80)
  at app.min.js:80
  at app.min.js:565
  at m.$digest (app.min.js:165)
  at m.$apply (app.min.js:168)
  at app.min.js:181

Answer 1

我想我已经把它扑灭了。您无法注册控制器，但您不必这样做。

这样的代码工作正常：

<div>
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
<br>
  Full Name: {{firstName + " " + lastName}}
</div>

<script>
  (function(scope) {
    scope.firstName= "John";
    scope.lastName= "Doe";
   })(scope)
</script>

Answer 2

您可以尝试这样。

<div layout="row" layout-align="space-between">
 <p>The number is</p>
 <p ng-style="{color: (msg.payload || 0) % 2 === 0 ? 'green' : 'red'}">
  {{(msg.payload || 0) % 2 === 0 ? 'even' : 'odd'}}
 </p>
</div>

如果显示为 msg.payload 的数字是偶数还是奇数，将显示。如果数字为偶数，则还将文本的颜色更改为绿色，如果为奇数，则将更改为红色。下一个示例显示了如何为模板设置唯一的ID，如何选择默认主题颜色以及如何监视任何传入消息。

 <div id="{{'my_'+$id}}" style="{{'color:'+theme.base_color}}">Some text</div>
<script>
console.log("ID",scope.$id);
console.log("THEME",scope.theme);
(function(scope) {
scope.$watch('msg', function(msg) {
 if (msg) {
   // Do something when msg arrives
   $("#my_"+scope.$id).html(msg.payload);
 }
});
})(scope);
</script>

以这种方式制作的模板可以复制并且彼此独立。

发送消息：

<script>
  var value = "hello world";
 // or overwrite value in your callback function ...
 this.scope.action = function() { return value; }
</script>
<md-button ng-click="send({payload:action()})">
     Click me to send a hello world
</md-button>

将显示一个按钮，单击该按钮将发送带有有效载荷“ Hello world”的消息。 使用msg.template ：您还可以通过 msg.template 定义模板内容，因此可以使用外部文件。如果模板已更改，它将在输入时重新加载。存在 msg.template 时，将忽略“模板”字段中编写的代码。

Node-Red无法注册AngularJS控制器

2 个答案: