javascript - AngularJs 模型更改不更新

标签 javascript angularjs

我有一个我想要编辑的模型,但由于某种原因没有任何变化,文本框没有显示并且模型没有被更新当使用ng-view

我可以看到正在使用 console.log 调用函数 enableEditor()

如果我在没有 profile.htmlindex.html 中以内联方式而不是 ng-view 编写它,则一切正常。

文件如下:

app.js

var proGamersApp = angular.module('proGamersApp', ['ngResource']).
    config(function ($routeProvider) {

        $routeProvider.
        when('/', { controller: 'ProfileController', templateUrl: '/app/partials/profile.html' }).
        otherwise({ redirectTo: '/' });
    });

var ProfileController = function ($scope) {

    $scope.init = function () {
        $scope.title = 'first title';
    };

    $scope.init();
    $scope.enableEditor = function () {
        console.log('enableEditor()')
        $scope.editorEnabled = true;
        $scope.editableTitle = 'second title';
        $scope.title = 'second title';
    };

     ...
};

index.html

<!doctype html>
<html ng-app="proGamersApp">
<head>
    <title>Pro Gamers</title>

    <!-- Scripts -->
    <script src="/app/lib/angular.min.js"></script>
    <script src="/app/lib/angular-resource.js"></script>
    <script src="/app/app.js"></script>

</head>
<body>
    <div ng-view></div>
</body>
</html>

profile.html

 <div ng-hide="editorEnabled">
        {{title}}
      <a href="#" ng-click="enableEditor()">Edit title</a>
    </div>
    <div ng-show="editorEnabled">
        <input ng-model="title" ng-show="editorEnabled">
        <a href="#" ng-click="save()">Save</a>
        or
      <a href="#" ng-click="disableEditor()">cancel</a>.
    </div>

有人知道我做错了什么吗?

谢谢

最佳答案

链接正在添加到您的地址,导致路由器刷新页面并破坏您所有的 $scope 变量。不要使用空白 anchor ,而是使用样式类似于 anchor 的 span:

span:hover {
    cursor:pointer;
}

这只会给光标指针,根据需要自定义颜色。同样根据您的评论,不要将 target=_self 添加到 href,将其添加到:

<a href="#" target=_self ng-click="save()">Save</a> //prevent address bar change

正如我之前所说,请改用 span。

关于javascript - AngularJs 模型更改不更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18660957/

相关文章:

javascript - 无效的日期/时间字符串 : Sun Jun 03 2012 00:00:00 GMT+0100 (GMT Daylight Time) CFML

javascript - Uncaught Error : [$injector:modulerr] Failed to instantiate module matchpoint due to:

angularjs - Cordova 文件传输到 Node 服务器

javascript - 为什么这个 onpaste 事件没有触发?

javascript - "You may need an additional loader to handle the result of these loaders."

javascript - ng-Repeat 堆叠卡片

html - Angular Material : Prevent layout resizing when select box value is chosen

javascript - 将 PHP 脚本返回的 HTML 表转换为 Ionic 框架的 ion-list 格式

javascript - HTML5 Canvas - 更改先前绘制的形状的颜色

javascript - 在甘特图 d3.js 顶部绘制多条线