Question

我遇到的问题是使用AngularStrap＆＃39; s ng-model应用于元素的bs-typeahead的值，在范围内无法访问。然而，它可以从HTML中的{{ var }}开始。

我有以下HTML：

<input type="text" placeholder="add a destination" ng-options="item as item for item in modelTypeahead" ng-model="selectedDestination" bs-typeahead data-template="templates/SrcDstTypeaheadTemplate.html">

我在控制器中初始化变量：

$scope.selectedDestination = "";

在HTML中的其他位置放置{{ selectedDestination }}可以按预期工作。

但是，当我在控制器中执行console.log($scope.selectedDestination);时，它会显示为空字符串。

如果我将初始化更新为某些内容，例如：

$scope.selectedDestination = "abc123";

... <input>和{{ selectedDestination }}都适当更新。我的console.log也会吐出设定值。但是，如果我更新预先输出，则{{ selectDestination }}会更新，但我的console.log会吐出＆＃39; abc123＆＃39;仍然。

是否存在我遗漏的范围问题？我不明白{{ selectedDestination }}如何推出正确的字符串，但console.log正在推出不同的东西。几乎看起来我的绑定是单向的，但AngularStrap的bs-typeahead应该是双向的（根据所有示例）。

Answer 1

你在做什么console.log？您必须确保在更改值之前确保值已显示，您可以这样做：

$scope.watch('selectedDestination', function() { 
    console.log($scope.selectedDestination); 
});

Answer 2

我不确定你是否仍然遇到任何问题，但是当我刚刚遇到它时，我找到了解决完全相同问题的方法。我几乎肯定它是一个范围问题或在AngularStrap内部应用失败，但我不知道从哪里开始寻找。

真的，我没有受过足够的教育，无法告诉你这个有效的原因，但这就是你所做的：

（1）您将变量更改为对象。

当您将模型放在一个对象而不是顶层变量上时，它通过指令层更好地工作。不要问我为什么......

（2）对刚刚创建的对象使用深度监视。

当您将其更改为某个对象时，您需要对该变量使用deep watch，或者$ apply和$ digest不会获取任何更改。这是因为默认情况下，将检查该值是否为“reference”相等而不是“value”相等。这会打破，因为对象的“引用”不会更改，只会更改其值。但要小心使用这种深度比较，因为额外的努力会导致很多开销。

这是一个与AngularStrap的typeahead一起使用的例子：

$scope.selectedDestination = {};

~~~

<input type="text" placeholder="add a destination" ng-options="item as item for item in modelTypeahead" ng-model="selectedDestination.destination" bs-typeahead data-template="templates/SrcDstTypeaheadTemplate.html">

~~~

$scope.$watch('selectedDestination', function(value) {
  console.log('selectedDestination', $scope.subComponent);
}, true); //here we need to tell the watch to do a deep watch

编辑我已将我的问题追溯到一些事情，但其中一部分是$ render函数。我会继续调查。祝你好运！

AngularStrap`bs-typeahead`的`ng-model`在范围内不可用？

2 个答案: