在 Angular JS 中点击添加 div 内容

Question

我在单击按钮时进行异步调用并想添加标签。我还使用了 s.$apply() - 我是 JS/Angular JS 的新手。我可以得到 help/pointers 类似的功能吗？我在 show/hide 上找到了几个例子，但没有找到任何更新 dom 的例子。谢谢

控制器代码：

    angular.module('solr').controller('SolrController', ['$scope', 'Solr', '$http',
        function ($scope, Solr, $http) {
            var s = $scope;
            s.dataPresent=false;

            s.policies = function(){
                    Solr.getDocuments(s.searchStr).then(function(data){
                         $scope.dataPresent=true;
                         $scope.test="done";
                        console.log(data);
                        $scope.data= data;
                    })
                }
                }
    ]);

下面粘贴了 HTML 片段

        <div class="navbar-default sidebar" role="navigation">
    <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
            <li class="sidebar-search">
                <div class="input-group custom-search-form" ng-controller="SolrController">
                    <input type="text" class="form-control" ng-model="searchStr" placeholder="Search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button" ng-click="policies()">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                </div>
                <!-- /input-group -->
            </li>
        </ul>

    </div>
</div>
    </div>
    <div class="col-sm-10" ng-show="dataPresent">Test</div>

基于此 wiki 尝试了 $apply

    s.policies = function(){
            Solr.getDocuments(s.searchStr).then(function(data){
                $scope.$apply(function(){
                    $scope.dataPresent=true;
                    $scope.test="done";
                    console.log(data);
                    $scope.data= data;

                })
            })
        }

Answer 1

ng-controller directive initialize controller with new scope that is available in the context of that element where directive has been placed.

你的 ng-show 指令对 dataPresent 变量一无所知，因为它不在 ng-controller div 中，你应该确保 <div class="col-sm-10" ng-show="dataPresent">Test</div> div 应该在 SolrController div.

里面

标记

<section data-ng-controller="SolrController">
    ...other html here..
    <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
            <ul class="nav" id="side-menu">
                <li class="sidebar-search">
                    <div class="input-group custom-search-form">
                        <input type="text" class="form-control" ng-model="searchStr" placeholder="Search...">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" ng-click="policies()">
                                <span class="glyphicon glyphicon-search"></span>
                        </button>
                        </span>
                    </div>
                    <!-- /input-group -->
                </li>
            </ul>

        </div>
    </div>

    <div class="col-sm-10" ng-show="dataPresent">Test</div>
</section>

在 Angular JS 中点击添加 div 内容

add div content on click in Angular JS

javascript

angularjs

firebase

angularjs-scope

angularjs-controller