【问题标题】:Bootstrap Popover not updating Scope VariableBootstrap Popover 不更新范围变量
【发布时间】:2016-07-02 16:56:20
【问题描述】:

一旦用户单击输入字段.. 我想获取输入字段的 ID 并过滤对象并在弹出窗口上绑定数据。但是 Scope 没有从指令中更新。以下是代码,请告诉我我做错了什么

  var app = angular.module('MyModule', []);
    app.controller("TestController", function ($scope, $window) {
        //$scope.ID = '0';
        $scope.myObj = [{ "ID": 0, "Name": 'user0' }, { "ID": 1, "Name": 'user1' }, { "ID": 2, "Name": 'user2' }]

        $scope.GetData = function () {

            var match = $.grep($scope.myObj, function (e) {
                return e.ID == $scope.myID
            });

            return match;
        };

    });

    app.directive('popOver', function ($compile, $timeout) {
        return {
            restrict: 'A', 
            link: function (scope, el, attrs) {
                $(el).bind('click', function () {
                    scope.$apply(function () {
                        scope.myID = attrs.popoverid ;
                    });
                });


                $(el).popover({
                    placement: 'bottom',
                    container: 'body',
                    trigger: "click",
                    content: $compile($('#popover-content').html())(scope)
                });
            }
        };
    });


 <div ng-repeat="i in [0,1,2]">
         <input  style="background: transparent"
            type="text"
            pop-over
            popoverid="{{i}}" 
             id="{{i}}"
            class="form-control enterTime" data-html="true">
        <br /><br />
    </div>


    <div class="bottom hide" id="popover-content">
        <div class="arrow" style="left: 47%;"></div>
        <div class="Bground-Project"> 
            <table>
                <tr>
                    <td>
                        {{GetData()}}
                    </td>
                </tr>
            </table> 
            <button type="button" ng-click="buttonClicked()">click me</button> 
        </div>
    </div> 

【问题讨论】:

    标签: angularjs bootstrap-popover


    【解决方案1】:

    当原始类型(即字符串、数字或布尔类型)被写入时——例如,scope.name = newName——“写入”总是转到本地范围/对象。换句话说,子作用域拥有自己的 name 属性,它会隐藏同名的父属性。解决方法是在父作用域中使用对象,而不是原始类型。然后子作用域将获得对该对象的引用。对对象属性的任何写入(无论是来自父对象还是子对象)都将写入该对象。 (子作用域没有得到自己的对象。)

    Is it Possible to Update Parent Scope from Angular Directive with scope: true?

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-28
      • 1970-01-01
      • 1970-01-01
      • 2014-01-24
      相关资源
      最近更新 更多