Javascript 无法使简单角度控制器显示值_Javascript_Html_Angularjs

Javascript 无法使简单角度控制器显示值

javascript html angularjs

Javascript 无法使简单角度控制器显示值,javascript,html,angularjs,Javascript,Html,Angularjs,这不是我第一次与控制器打交道，但由于某种原因，这一个拒绝按预期工作。我有种感觉，我忘记了一些非常基本的东西，但不知道是什么这是我的HTML： <html> <body> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <div ng-a

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

这是我的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>

我相信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>


你好，蒙多。
Dentro de控制器1。Nombre:{{datos.Nombre}}
Propiedad:{{datos.Propiedad}}

你不必像别人说的那样使用$scope。
我认为使用这个关键字更好
当您以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>


你好，蒙多。
Dentro de控制器1。Nombre:{{firstCtrl.Nombre}}
Propiedad:{{firstCtrl.Propiedad}}

使用$scope
代替此
或通过您的控制器调用，即firstCtrl.nombre
使用此
如果在使用controllerAs语法时将其分配给某个对象，则可以。i、 evar vm=this在您的绑定中添加一个点（立即更新答案…）如果在使用controllerAs语法时将其指定给某个对象，则此
可以。i、 evar vm=thistrue，但关键是不能在本地声明函数并让它从标记执行。此外，将变量分配给控制器而不是范围对我来说感觉不那么直观和可共享，这就是为什么我在回答中选择了这条路线。我过去也这么认为，直到我改为遵循一些人的风格指南进行角度分析。有一个vm=view模型变量，而范围留给观看/广播等。这使得理解imo更容易。我以前用过这种方法，但这次不行。我用这种方法得到了它。我想我以前一定是拼错了什么。
<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>