AngularJS:输入表单在部分内部不起作用

时间:2015-02-21 12:06:45

标签: javascript html angularjs

页面的层次结构如下:

<div ng-include="'partials/navbar.html'"></div>
<div ng-view></div>
<div ng-include="'partials/footer.html'" id="footer"></div>

这是主要的index.html,它还包含所有脚本源。

在ng-view中有另一个使用标题部分的索引:

div ng-include="'partials/header_search.html'"></div>

此header_seatch部分包含基于角度的输入形式

<form name="searchLocation" ng-submit="search()">
        <div class="input-group">
        <input type="text" name="location" ng-model="location" ng-autocomplete ng-change="error = false"/>

        <div class="input-group-addon">
            <button type="submit">Search</button>
        </div>
        </div>
        <span ng-if="error">No such address</span>
    </form>

这就是我遇到的问题 - 以下表单在置于标题部分内部时没有响应。当我在索引视图中复制/粘贴它时,一切都很好。角度是否与放置在部分中的ng-stuff混淆?我应该修改什么才能使它在标题部分内工作?

提前致谢!

1 个答案:

答案 0 :(得分:0)

ng-include有它自己的范围,这非常令人困惑。我建议用指令替换ng-include。

否则这应该有效:

<form name="searchLocation" ng-submit="$parent.search()">
 <div class="input-group">
 <input type="text" name="location" ng-model="$parent.location" ng-autocomplete   ng-change="error = false"/>
    <div class="input-group-addon">
        <button type="submit">Search</button>
    </div>
    </div>
    <span ng-if="$parent.error">No such address</span>
</form>

请注意使用$ parent是不好的做法,应该避免使用。