0

这里有角度的新手,想法表示赞赏......

假设我想要一个输入字段来控制您键入时的窗口标题。具有模型绑定且没有关联控制器的字段按预期作用于按键。然而,它必须有更多的逻辑——任何用户输入之前的默认值,如果输入为空白,也使用它。

添加绑定到封闭元素的控制器为该逻辑提供了一个位置,但是按键更改行为消失了。我确信可以手动或使用 ui 重新创建它,但由于它本身就没有控制器,我想知道我是否错过了简单的干净方式。

简单版本,作用于按键,但没有智能:

<title ng-bind-template="{{windowTitle}}">Default Title (not seen)</title>
<input ng-model="windowTitle" type="text">

将控制器绑定放在头部(用于标题)和包含 div(用于输入),并在控制器函数内设置默认 $scope.windowTitle 确实使用该默认值,但它会破坏自动更新。

我知道在现实生活中你会想要一个真实的模型,但我真正想了解的是 Angular 的这两种工作方式。我还没有找到任何具体描述两种不同的隐式输入绑定行为的东西,但我还没有阅读所有文档。

我应该如何思考这个问题?


编辑:这不是我感兴趣的窗口标题或默认值本身。我试图理解这一点:

  • 当字段或标题上没有控制器时,在字段中键入会立即更改窗口标题,在按键时。标题直接链接到字段值,没有其他角度连接。
  • 使用围绕标题和字段的控制器绑定,在字段中键入对标题没有影响。

从那以后我意识到(我认为)是 ng-controller 绑定每次都会创建一个新的控制器实例。这是我之前没有显示的非工作代码:

<title ng-controller="TitleCtrl" ng-bind-template="{{windowTitle || 'Foo'}}">Foo</title>
...
<label ng-controller="TitleCtrl">
    <input ng-model="windowTitle" type="text">
    {{windowTitle}}
</label>

模型绑定到该字段设置的值在该控制器的该实例中正确显示,并像以前一样在按键时更新。但是由于这两个控制器实例是分开的,所以绑定到标题有效,但它指向的数据没有绑定到字段。

不是吗?它在没有控制器的情况下工作的原因是这使得值全局,所以标题绑定看到由字段绑定设置的值。

那么从其他领域引用数据的规范方法是什么?创建服务?

我意识到这是基本的 Angular 东西,只是从这里开始,所以谢谢!


编辑 2 经过反思,我开始严重不尊重这整个问题,即使我写了它。

它是基于对 Angular 应用程序模型的太早理解不足。我只完成了官方教程的一部分,然后开始从一个不大但并非完全不重要的现有应用程序中删除所有 js,并探索 Angular 在这种情况下可以做什么。

我很快就物有所值,用很少的代码就可以使用几个功能,而且标记简单、清晰,感觉很好。但是我确实在内部化 Angular 思维方式方面出现了短路,当页面的不同部分需要相互协调时,我快速而肮脏的无架构方法就崩溃了,就像在这个问题中一样。

当我回到教程和其他学习时,我已经推迟了那个项目。如果其他人认为这个问题应该被删除,我会添加我的投票。或者也许它在某种程度上是有用的,尽管它是无知的。

4

1 回答 1

0

好吧,有多种方法可以在不使用显式控制器和模型的情况下实现您想要的行为,您可以:

<title ng-bind-template="{{windowTitle && windowTitle || 'default'}}"></title>

或者以更简单的方式:

<title>{{windowTitle && windowTitle || 'default' }}</title>

在这两种情况下,我们都使用条件表达式:

(condition) && (answer if true) || (answer if false)

但是,您应该努力从模板中删除逻辑。

于 2012-12-01T13:38:03.250 回答