根据https://github.com/angular/angular.js/wiki/Understanding- Scopes的说法,尝试将数据绑定到附加到您的基本体上是一个问题$scope:
$scope
范围继承通常是简单明了的,并且您通常甚至不需要知道它的发生……直到您尝试将2-way数据绑定(例如,表单元素,ng- model)绑定到基元(例如,数字,字符串,布尔值)从子作用域内部在父作用域上定义。它不能像大多数人期望的那样工作。
建议是
通过遵循始终具有“’”的“最佳实践”,可以很容易地避免使用基元出现此问题。在您的ng模型中
现在,我有一个非常简单的设置,它违反了以下规则:
HTML:
<input type="text" ng-model="theText" /> <button ng-disabled="shouldDisable()">Button</button>
JS:
function MyController($scope) { $scope.theText = ""; $scope.shouldDisable = function () { return $scope.theText.length >= 2; }; }
这真的不好吗?当我开始尝试以某种方式使用子范围时,这会以某种可怕的方式将我弄糟吗?
我需要将其更改为类似
function MyController($scope) { $scope.theText = { value: "" }; $scope.shouldDisable = function () { return $scope.theText.value.length >= 2; }; }
和
<input type="text" ng-model="theText.value" /> <button ng-disabled="shouldDisable()">Button</button>
以便我遵循最佳做法?您能给我一个具体的例子吗,后者将使我免于前者带来的可怕后果?
一个 很多 的东西引入新的领域。假设在您的控制器中,您实际上要添加选项卡:第一个选项卡是实际的渲染,第二个选项卡是表单(以便您具有实时预览)。
您决定为此使用指令:
<tabs> <tab name="view"> <pre>{{theText|formatInSomeWay}}</pre> </tab> <tab name="edit" focus="true"> <input type="text" ng-model="theText" /> </tab> </tabs>
好吧,知道什么?<tabs>有自己的范围,并打破了您的控制器之一!因此,当您进行编辑时,angular将在js中执行以下操作:
<tabs>
$scope.theText = element.val();
它将不会遍历原型链尝试并设置theText在父级上。
theText
编辑:为了清楚起见,我仅以“标签”为例。当我说“ 很多 东西引入了新的作用域”时,我的意思是:ng-include,ng-view,ng- switch,ng-controller(当然)等。
所以说:这可能并不需要 现在为 ,因为你还没有孩子在该视图范围,但你不知道你是否要去添加子模板或没有,这最终可能会改变theText自己,从而导致问题。为了将来验证您的设计,请始终遵守该规则,然后您就不会感到惊讶了;)。