html页面上可用的角度范围变量但不是控制器？答案

【问题标题】：Angular scope variable available on html page but not controller?html页面上可用的角度范围变量但不是控制器？
【发布时间】：2017-01-24 17:27:45
【问题描述】：

我想知道是否有人可以帮助我我创建了一个新指令，以便在从 webServer 加载数据时过滤下拉列表。一切正常，我可以使用 {{ myValue }} 将值写入 HTML 页面，甚至可以在输入上使用 ng-model，它会返回值。

但由于某种原因，如果我尝试通过控制器访问变量$scope.myValue 是undefined？

我创建了一个 plunker（不从 webServer 加载数据，而只是加载基本列表值），但这似乎有效，而我的项目却没有，因为我从那里复制了它，所以我没有得到我的项目！

如果有人有任何想法，我会很感激听到他们的意见。

Plunker

在我的页面上

<div search-dropdown text="myText" value="myValue"></div>

指令是

<div class="btn-group searchDropdown">
    <button type="button" class="btn btn-default">
        <input search-dropdown-input type="text" placeholder="Enter name to search..." ng-model="filterText" ng-change="filter();" />
    </button>
    <button search-dropdown-toggle type="button" class="btn btn-default dropdown-toggle">
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li ng-repeat="item in items"><a href="javascript:void(0);" ng-click="selectItem($index);">{{ item.name }}</a></li>
    </ul>
</div>

【问题讨论】：

在什么时候将数据加载到应用程序中？

标签： javascript angularjs angularjs-directive angularjs-scope angular-ui-bootstrap

【解决方案1】：

您说您是从 webServer 加载它，是不是您试图在后端的数据分配给它之前使用该变量？

我建议使用类似的东西：

$scope.$watch("myValue", function (newVal) {console.log(newVal);})

或：

$timeout(function () {console.log($scope.myValue);}, 5000)

这个想法是在后端 AJAX 请求完成后打印变量值。它将打印正确的值，而不是您必须使用 $watch 函数以及在变量具有预期值后您需要对变量执行的操作。

【讨论】：

【解决方案2】：

看来一切都很好。唯一的区别是我的角度版本。

为了修复我的版本，我使用了一个对象而不是两个单独的变量来传递给我的指令。

所以现在我的指令属性是这样填充的

Text="myObj.text" value="myObj.value"

我猜对变量的“引用”不知何故丢失了？

以前遇到过类似的问题，建议这样做。我只是在我在这里发布后才记得。希望这对其他人有帮助

【讨论】：