Angularjs:两种方式的数据绑定和控制器重新加载

2024-05-17

如果使用路由和控制器,则模型不会在控制器重新加载之间保存其状态。 Angular 在每个路由负载上创建控制器实例和新范围。

例如,我在输入中键入具有 ng-model="something" 的内容,转到另一条路线,然后返回第一条路线。我输入的所有文字都丢失了。

我需要在路由更改之间进行简单的双向数据绑定。尽可能简单,就像knockoutjs中的ko.observable一样。或者隐式地像一个控制器中的角度一样。也许用单例 $scope 作为控制器?

当我创建用于在路由更改之间保存数据的服务并将其注入控制器时,我找到了方法。在控制器的构造函数中,我使用服务中的值创建模型,并 $scope.watch 该模型进行更改,并在更改时将模型的值设置为服务。

有没有更简单的方法?


你是对的——服务是做到这一点的正确方法。你可以像这样使用它:

app.js

app.factory('paginationService', function() {
    return {
        cur: 1,
        total: 9,
        pageSize: 8
    };
});


app.controller('Page1Ctrl', function($scope, paginationService) {
  $scope.pagination = paginationService;
});

第1页.html

<div ng-controller="Page1Ctrl">
  <h2>Page1</h2>

  <p>curPage: <input type="number" ng-model="pagination.cur" /></p>  
</div>

See 完整的例子 http://plnkr.co/3Uffdf.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angularjs:两种方式的数据绑定和控制器重新加载 的相关文章

  • Angular 链接函数:$Scope 与 Scope

    在我在教程中看到的角度指令中 link function scope element attrs or link function scope element attrs 现在我知道 意味着角度服务 这在这里成立吗 scope 和scope
  • WebAPI 和 Angular JS Excel 文件下载 - 文件损坏

    我正在 WebAPI 中生成 Excel 文件 我将其 存储 在内存流中 然后放入响应 如下所示 var result new HttpResponseMessage HttpStatusCode OK Content new Stream
  • 如何使用 Angular 创建 n 个可打印页面?

    嗯 我搜索了一下 没有找到类似的东西 我想知道如何使用 Angular 创建可打印内容 跳转到页面末尾并打印更多内容 如何强制内容始终适合特定尺寸 例如 PDF 我需要 Angular 来执行此操作吗 如果不是 HTML 我可以迭代 PDF
  • 使用 ng-if 内容短暂呈现然后消失

    我的页面上有一些内容包含在 ng if 中 如下所示 div class text danger p strong Message displayed to User strong p div 然后在我的 Angular js 控制器中我有
  • 如何访问 Angularjs 模板中的常量

    如何将公共js文件中定义的常量访问到不同模块的模板中 如果我在 MainModule js 中定义了一个这样的常量 该常量包含在主 html 文件的开头 gt var myApp angular module AC gt myApp con
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 未捕获的引用错误:在 karma start karma.conf.js 上未定义 require

    使用 Karma 和 Jasmine 对 Rails 应用程序的 Angular 前端进行单元测试 看来我已经做了所有已知的事情来解决这个错误 并且我的 package json 中留下了一百万个依赖项 这是我的 Karma conf js
  • Angular UI 路由器嵌套视图问题

    我在理解 Angular UI Router 嵌套视图的工作原理时遇到了一些问题 我的 stateProvider 看起来像这样 stateProvider state login url login views main template
  • ui-sref 和变量状态参数名称

    我想呈现一个链接 例如 a 其中州名myState和钥匙myKey是变量 有办法做到这一点吗 我发现自己处于同样的情况 我也无法完成这一点 尝试使用 ng click 移动代码 并在 ng click 函数内部使用 stage go htt
  • AngularJs ng-if 比较日期

    我正在比较 ng 中的两个日期 如果这就是我的玉文件的样子 li list group item ng if app Segments 0 StartDate getTime gt date getTime div row div col
  • 动态分配 ng-model

    我正在尝试从对象数组生成一组复选框 我的目标是让复选框动态地将其 ng model 映射到将提交到数组中的新对象的属性 我的想法是这样的 li li
  • 喜欢和不喜欢用户对产品的评论

    用户架构 var UserSchema new Schema review likes type String review dislikes type String 审查架构 var ReviewSchema new Schema pro
  • 为什么还是filter和orderBy的优点呢?

    看来 AngularJS 确实非常重视在视图中使用过滤器和其他 ng 指令来过滤和排序数据 而不是在模型中手动执行 这有什么原因吗 比如速度更快 有缓存还是其他原因 例如 我想显示一个已排序的列表 但我也想访问已排序的列表以用于与视图无关的
  • AngularJS工厂如何返回一个对象

    我有一个要求 我应该在其中编写工厂 这个工厂应该包含3个函数init save和delete 我应该从控制器调用 init 函数 该函数返回一个对象 该对象具有执行添加和删除功能的功能 我怎样才能做到这一点 以下是我的代码 它成功执行了 i
  • 在 AngularJS 中动态显示图像

    我正在使用http请求从数据库获取图像的路径 并且图像位于服务器中 我想在 img src 中显示该图像 这是代码 http url user profile exec php method GET params uid user id s
  • 使用 AngularJS 制作 Windows Phone 全景图

    我正在尝试在 AngularJS 应用程序中复制 Windows Phone Ui 这是一个example http www expertreviews co uk gallery features 1295629 designing wi
  • 是否可以连接 Angular ng-options 中的值

    基本上 我试图填充一个选择框 但连接来自first name列和last name column 我想做的 不起作用
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • 如何为 ng-repeat orderBy 创建回调?

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr
  • ChangeState 之后重置/卸载控制器(调用注销)。 AngularJS

    我正在创建一个应用程序 用户可以从 Facebook 或 Twitter 登录 登录后 用户将被定向到某个主页 在这里 控制器加载并调用我的初始函数 该函数加载特定于该用户的数据 当用户单击 注销 时 令牌将被清除 用户将被定向到登录页面

随机推荐

  • Internet Explorer 9 是否会因数组和对象文字末尾的额外逗号而卡住?

    现代浏览器和 Node js 等环境允许您说 a 1 b 2 或 1 2 3 这在历史上一直是 Internet Explorer 的问题 Internet Explorer 9 中修复了此问题吗 对此有两种不同的答案 一种是对象初始值设定
  • 洪水填充优化:尝试使用队列

    我正在尝试创建一种填充方法 该方法采用用户指定的初始坐标 检查字符 然后根据需要更改它 这样做之后 它会检查相邻的方块并重复该过程 经过一番研究 我遇到了洪水填充算法并尝试了该算法 它可以工作 但无法满足我对 250 x 250 个字符的数
  • 使用Multiprocessing和Pool时如何访问全局变量?

    我试图避免将变量冗余地传递到dataList e g 1 globalDict 2 globalDict 3 globalDict 并在全球范围内使用它们 global globalDict然而 在下面的代码中并不是这样做的解决方案 是否有
  • 如何执行“sudo nvm”?

    在我的 Mac 上 我想将一些需要 su 权限的包迁移到另一个节点版本 我使用 homebrew 安装 nvm 现在我需要执行 sudo nvm 或 reinstall packages将失败 me MacBook sudo nvm sud
  • iOS 电池监控 Swift

    我已将监控设置为启用 但模拟器和设备中的电池电量仍然为 1 UIDevice currentDevice batteryMonitoringEnabled true var level UIDevice currentDevice batt
  • Angular Libraries Monorepo:是否可以为每个库使用不同的版本?

    只是一个简单的问题 我似乎找不到答案 我正在尝试构建一个应该能够使用 angular cli v8 的 monorepo 但仍然能够编译和构建为 v2 v3 v4 等制作的库 主要是组件和服务 版本之间发生了很多变化 所以让我们举个例子 V
  • 在 PHP 中模拟 jQuery.ajax 请求

    我必须在 PHP 中模拟 AJAX 请求 就像在 jQuery 中一样 我当前的代码在这里 原始 AJAX 调用 不得修改 ajax type POST url someFile php data data success function
  • tkinter:打开一个带有按钮提示的新窗口[关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 用户如何按下 tkinter GUI 中的按钮来打开新窗口 我只需要非常简单的解决方案 如果代码也能被解释那就太好了 这
  • Azure函数版本2.0-应用程序blobTrigger不工作

    我有一个工作功能应用程序 它有一个 blob 输入和一个事件中心输出 在测试版中工作 随着最新的更改 我的功能不再起作用 我尝试根据发行说明更新 host json 文件 但它没有引用 blob 触发器 version 2 0 extens
  • 从输入类型编号获取无效值

    我正在使用输入类型数字 当它无效时 我如何从中获取值 例如 使用类型编号并仅打印 e 这本身是无效的 我正在使用 React 但我认为这个问题非常普遍 onChange event console log event target valu
  • 从类模板参数为 asm 生成唯一的字符串文字

    我有一个非常特殊的情况 我需要为类模板中声明的变量生成唯一的汇编程序名称 我需要该名称对于类模板的每个实例都是唯一的 并且我需要将其传递给asm关键字 see here https gcc gnu org onlinedocs gcc 12
  • Java EE 目录结构

    我对以下教程有疑问 http www mkyong com jsf2 jsf 2 internationalization example http www mkyong com jsf2 jsf 2 internationalizatio
  • 无法使用 HTML 设置未定义 jQuery UI 自动完成的属性“_renderItem”

    我使用以下代码将 jQuery UI 自动完成项呈现为 HTML 这些项目在自动完成控件中正确呈现 但我不断收到此 JavaScript 错误并且无法移动过去 Firefox 无法转换 JavaScript 参数 Chrome 无法设置未定
  • 如何确定母版页中正在显示哪个子页?

    我正在母版页上编写代码 我需要知道正在显示哪个子 内容 页面 我怎样才能以编程方式做到这一点 我用这个 string pageName this ContentPlaceHolder1 Page GetType FullName 它以 AS
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 如何绘制大时间序列(数千次给药次数/药物剂量)?

    我正在尝试绘制医院中如何开出单一药物的图解 在这个虚拟数据库中 我在 2017 年 1 月 1 日之后遇到了 1000 名患者 绘图的目的是了解该药物的给药模式 在接近入院 出院或患者住院期间是否更频繁 高剂量给药 Get random d
  • python 中的 after() 与 update()

    我是 python 新手 开始使用 tkinter 作为画布 到目前为止 我使用 update 来更新我的画布 但还有一个 after 方法 谁能给我解释一下这个函数 请举个例子 两者之间有什么区别 root after integer c
  • “pdo_mysql”已禁用,我无法启用它。我在 iMac 7.1 OSX 10.6.8 上安装了 MAMP v. 3.0.4

    pdo mysql 已禁用 我无法启用它 我在 iMac 7 1 OSX 10 6 8 上安装了 MAMP v 3 0 4 在我的 phpinfo 页面上 我可以看到唯一启用的 PDO 是 sqlite 如果我查看 php 5 5 10 扩
  • 如何在 Erlang 中将数字转换为单词?

    我发现了一个关于将数字转换为 单词 的有趣问题 代码高尔夫 数字到单词 https stackoverflow com questions 309884 code golf number to words 我真的很想看看你如何在 Erlan
  • Angularjs:两种方式的数据绑定和控制器重新加载

    如果使用路由和控制器 则模型不会在控制器重新加载之间保存其状态 Angular 在每个路由负载上创建控制器实例和新范围 例如 我在输入中键入具有 ng model something 的内容 转到另一条路线 然后返回第一条路线 我输入的所有