为什么不会在这个Angular JS测试中执行ng-change?

时间:2014-05-12 23:39:20

标签: javascript html angularjs

我想测试 Angular JS 每次修改文本输入的方式,其对应的模型对象将打印到控制台。

我得到了这个标记:

它由具有ng-controller="datosPersonalesController"属性的div包装。和ng-app的外部div。

这是JavaScript:

function datosPersonalesController ($scope) {

    $scope.name = "Paco"

    $scope.datosPersonales = {

        nombre:     "",
        apellidos:  0,
        edad:       0,
        telefono:   "",
        celular:    "",
        mail:       "",
        fb:         "",
        direccion:  ""
    }

    $scope.testAngular = function  () {

        console.log($scope.name)
    }
}

我在<head>中包含了JS文件。

但是,在浏览器中进行测试后,它不会向控制台打印任何内容。我实际上希望模型为$scope.datosPersonales.nombre,但更改为名称以进行检查。

我将此fiddle包含在<p>中,但不会显示。

1 个答案:

答案 0 :(得分:2)

在您的小提琴中,定义控制器的脚本在加载页面时正在运行。 Angular在此之前运行,它找不到控制器。更改侧面的下拉列表以将脚本放入正文中。

这应该可行了......

<div ng-app>
    <div ng-controller="datosPersonalesController">
        <input type="text" class="form-control" id="inputNombre" placeholder="Nombre(s)" ng-model="datosPersonales.nombre" ng-change="testAngular()">
        <p>{{datosPersonales.nombre}}</p>
    </div>
</div>

Fiddle