无法获取简单的Angular控制器来显示值

Cannot get simple Angular controller to display a value

本文关键字：控制器 显示 Angular 获取 简单      更新时间：2023-09-26

这不是我第一次处理AngularJS控制器，但由于某种原因，这个控制器无法按预期工作。我有一种感觉，我忘记了一些非常基本的东西，但不知道是什么。

这是我的HTML:

<html>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<div ng-app="MyApp">
    Hola mundo.
    <div ng-controller="MyFirstCtrl as firstCtrl">
        Dentro de controller 1. Nombre: {{nombre}} <br> Propiedad: {{propiedad}} <br>
    <input type="button" ng-click="setea()" value="Setea">
    </div>
</div>
</body>
</html>

这是我的app.js:

var app = angular.module('MyApp',[]);
app.controller("MyFirstCtrl",function() {
   this.nombre ='Me';
   this.propiedad ='Value';
    var setea = function(){
       alert('In function');
       this.nombre ='Another value';
       this.propiedad ='Another Property';
    };
});

我相信Angular加载是正确的，因为我在控制台上没有看到任何错误，模板值也没有显示为{{nombre}}和{propiedad}。相反，它们显示为空白。如果我使用ng-init初始化这些属性，它们将正确显示。我在Angular 1.2和1.3中都尝试过，结果都是一样的。

角度属性通过范围绑定：

var app = angular.module('MyApp',[]);
app.controller("MyFirstCtrl",function($scope) {
   $scope.datos.nombre ='Me';
   $scope.datos.propiedad ='Value';
    var $scope.setea = function(){
       alert('In function');
       $scope.datos.nombre ='Another value';
       $scope.datos.propiedad ='Another Property';
    };
});

将设置$scope上的值，然后将其用作绑定到模板的上下文。

你还需要把setea放在$scope上（直到我看到另一个答案上的评论才意识到。虽然下面的文本可能不适用于你的情况，但我把它作为一个有角度的好做法）。

不相关，但良好的实践

您还需要绑定到一个对象（在本例中为datos），因为javascript处理基元的方式，您需要有一个像read(datos).write(nombre)和read(datos).write(propiedad)那样有角度的对象。您可以在这里找到更多关于这个问题的信息（第一个反模式描述了这个问题，并提供了有关它的深入文章的链接）。

你的模板现在看起来是这样的：

<html>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<div ng-app="MyApp">
    Hola mundo.
    <div ng-controller="MyFirstCtrl as firstCtrl">
        Dentro de controller 1. Nombre: {{datos.nombre}} <br> Propiedad: {{datos.propiedad}} <br>
    <input type="button" ng-click="setea()" value="Setea">
    </div>
</div>
</body>
</html>

您不必像其他人说的那样使用$scope
我认为使用this关键字更好。

在执行controller as ctrl 时，需要将绑定前缀设置为控制器firstCtrl.

<div ng-app="MyApp">
    Hola mundo.
    <div ng-controller="MyFirstCtrl as firstCtrl">
        Dentro de controller 1. Nombre: {{firstCtrl.nombre}} <br> Propiedad: {{firstCtrl.propiedad}} <br>
    <input type="button" ng-click="firstCtrl.setea()" value="Setea">
    </div>
</div>
相关文章：