首页 \ 问答 \ Bootstrap popover指令和Angularjs的嵌套元素(Bootstrap popover directive and nested element with Angularjs)

Bootstrap popover指令和Angularjs的嵌套元素(Bootstrap popover directive and nested element with Angularjs)

 我一直在尝试创建一个指令，我可以随意添加到现有表单（作为属性），这使得表单在点击附近的触发链接时成为一个弹出窗口。 我有指令工作一次，但是一旦我再次点击链接，基础数据不会改变，按钮（例如'close'）停止工作。  
 可以在这里找到一个plunker： http ：//plnkr.co/edit/2Zyg1bLearELpofeoj2T？p = preview  
 重现的步骤：1。单击链接，2。更改文本（注意链接文本也会更改），3。单击关闭（确定当前没有正确的操作），4。再次单击链接，5。尝试更改文本/单击关闭，但没有任何作用...  
 我已经读过一个问题，即bootstrap中的popovers被分离/附加到DOM，但我不知道如何解决这个问题。 我也想避免第三方库（例如angular-ui），因为我想避免开销。  
 任何帮助是极大的赞赏。  
 更新感谢Vasaka的暗示，我能够进一步发展。 问题略有改变，因为嵌套指令现在似乎没有从$compile受益，即我不相信它附加到范围。  
 要重现该行为，请单击日期（下面的plunker链接），单击popover中的日期（日期应递增）并关闭弹出窗口。 再次重复这些步骤，您会注意到递增日期不再起作用。 我试图添加$compile(element.contents())(scope)以尝试编译嵌套指令simple-date-picker ，但这并没有解决问题。  
 这是更新的plunker： http ：//plnkr.co/edit/2Zyg1bLearELpofeoj2T？p = preview  
 更新的代码：  
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="jquery@1.9.1" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.2.5" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>

    <style>
    body {margin-top:40px; margin-left:40px;}
    </style>
    <script>
      var module = angular.module('module', []);

      module.directive('simpleDatePicker', function($compile) {
        return {
          restrict: 'E',
          scope: {
            date: '='
          },
          replace: true,
          template: '<div ng-click="date.setDate(date.getDate()+5)"> {{ date }} </div>',
        }
      });

      module.directive('myForm', function() {
        return {
          restrict: 'E',
          scope: {
            popover: '=?',
            value: '='
          },
          transclude: true,
          replace: true,
          template:
            '<div>' +
              '<a href="" ng-transclude></a>' +
              '<form ng-submit="submit($event)" ng-hide="popover && !formVisible" ng-attr-popover="{{ popover }}" class="form-inline">' +
                '<simple-date-picker date="value"></simple-date-picker>' +
                '<div ng-hide="!popover">' +
                  '<button type="submit" class="btn btn-primary">OK</button>' +
                  '<button type="button" class="btn" ng-click="formVisible=false">close</button>' +
                '</div>' +
                '<div class="editable-error help-block" ng-show="error">{{ error }}</div>' +
              '</form>' +
            '</div>',
          controller: function($scope, $element, $attrs) {
            $scope.formVisible = false;
            $scope.submit = function(evt) {
              $scope.formVisible = false;
            }
          }
      }});

      module.directive('popover', function($compile) {
        return {
          restrict: 'A',
          scope: false,
          compile: function compile(tElement, tAttrs, transclude) {
            return {
              pre: function preLink(scope, iElement, iAttrs, controller) {
              },
              post: function postLink(scope, iElement, iAttrs, controller) {
                var attrs = iAttrs;
                var element = iElement;

                // We assume that the trigger (i.e. the element the popover will be
                // positioned at is the previous child.
                var trigger = element.prev();
                var popup = element;

                // Connect scope to popover.
                trigger.on('shown', function() {
                  var tip = trigger.data('popover').tip();
                  $compile(tip)(scope);
                  scope.$digest();
                });

                trigger.popover({
                  html: true,
                  content: function() {
                    scope.$apply(function() {
                      scope.formVisible = true;
                    });
                    return popup;
                  },
                  container: 'body'
                });
                scope.$watch('formVisible', function(formVisible) {
                  if (!formVisible) {
                    trigger.popover('hide');
                  }
                });
                if (trigger.data('popover')) {
                  trigger.data('popover').tip().css('width', '500px');
                }
              }
            }
          }
        };
      });

      function MyCtrl($scope) {
          $scope.value = new Date(0);
      }

      angular.element(document).ready(function() {
        angular.bootstrap(document, ['module']);
    });

      </script>
  </head>

  <body ng-controller="MyCtrl">
    <my-form popover="true" value="value">
    {{ value }}
  </my-form>
  </body>

</html>

I've been trying to create a directive which I can arbitrarily add to an existing form (as attribute), which makes the form become a popover upon clicking on a nearby trigger link. I've got the directive to work once, but once I click the link again, the underlying data does not change and the buttons (eg. 'close') stop working. 
A plunker can be found here: http://plnkr.co/edit/2Zyg1bLearELpofeoj2T?p=preview 
Steps to reproduce: 1. Click on link, 2. Change text (note that link text changes as well), 3. Click close (ok doesn't do the right thing at current), 4. Click on link again, 5. Try to change text/click close, but nothing works... 
I've read that a problem is that popovers in bootstrap are detached/attached to the DOM, but I don't know how I could resolve this issue anyway. I also would like to avoid third party libraries (such as angular-ui), as I'd like to avoid the overhead. 
Any help is greatly appreciated. 
Update Thanks to Vasaka's hint, I was able to progress a little further. The problem slightly changed in that the nested directive now does not seem to benefit from the $compile, i.e. I don't believe it is attached to the scope. 
To reproduce the behaviour, click on the date (plunker link below), click on the date in the popover (date should increment) and close the popover. Repeating the steps again, you will notice that incrementing the date doesn't work any more. I tried to add $compile(element.contents())(scope) in an attempt to also compile the nested directive simple-date-picker, but this didn't resolve the issue. 
Here's the updated plunker: http://plnkr.co/edit/2Zyg1bLearELpofeoj2T?p=preview 
And the updated code: 
<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script data-require="jquery@1.9.1" data-semver="1.9.1" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script data-require="bootstrap@2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.2.5" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>

    <style>
    body {margin-top:40px; margin-left:40px;}
    </style>
    <script>
      var module = angular.module('module', []);

      module.directive('simpleDatePicker', function($compile) {
        return {
          restrict: 'E',
          scope: {
            date: '='
          },
          replace: true,
          template: '<div ng-click="date.setDate(date.getDate()+5)"> {{ date }} </div>',
        }
      });

      module.directive('myForm', function() {
        return {
          restrict: 'E',
          scope: {
            popover: '=?',
            value: '='
          },
          transclude: true,
          replace: true,
          template:
            '<div>' +
              '<a href="" ng-transclude></a>' +
              '<form ng-submit="submit($event)" ng-hide="popover && !formVisible" ng-attr-popover="{{ popover }}" class="form-inline">' +
                '<simple-date-picker date="value"></simple-date-picker>' +
                '<div ng-hide="!popover">' +
                  '<button type="submit" class="btn btn-primary">OK</button>' +
                  '<button type="button" class="btn" ng-click="formVisible=false">close</button>' +
                '</div>' +
                '<div class="editable-error help-block" ng-show="error">{{ error }}</div>' +
              '</form>' +
            '</div>',
          controller: function($scope, $element, $attrs) {
            $scope.formVisible = false;
            $scope.submit = function(evt) {
              $scope.formVisible = false;
            }
          }
      }});

      module.directive('popover', function($compile) {
        return {
          restrict: 'A',
          scope: false,
          compile: function compile(tElement, tAttrs, transclude) {
            return {
              pre: function preLink(scope, iElement, iAttrs, controller) {
              },
              post: function postLink(scope, iElement, iAttrs, controller) {
                var attrs = iAttrs;
                var element = iElement;

                // We assume that the trigger (i.e. the element the popover will be
                // positioned at is the previous child.
                var trigger = element.prev();
                var popup = element;

                // Connect scope to popover.
                trigger.on('shown', function() {
                  var tip = trigger.data('popover').tip();
                  $compile(tip)(scope);
                  scope.$digest();
                });

                trigger.popover({
                  html: true,
                  content: function() {
                    scope.$apply(function() {
                      scope.formVisible = true;
                    });
                    return popup;
                  },
                  container: 'body'
                });
                scope.$watch('formVisible', function(formVisible) {
                  if (!formVisible) {
                    trigger.popover('hide');
                  }
                });
                if (trigger.data('popover')) {
                  trigger.data('popover').tip().css('width', '500px');
                }
              }
            }
          }
        };
      });

      function MyCtrl($scope) {
          $scope.value = new Date(0);
      }

      angular.element(document).ready(function() {
        angular.bootstrap(document, ['module']);
    });

      </script>
  </head>

  <body ng-controller="MyCtrl">
    <my-form popover="true" value="value">
    {{ value }}
  </my-form>
  </body>

</html>

原文：https://stackoverflow.com/questions/21106011

更新时间：2023-05-27 19:05

最满意答案

 将parent属性设置为CardView 。 
 你甚至不需要添加xmlns:card_view="http://schemas.android.com/apk/res-auto" 。  
 工作代码片段：  
<style name="CardViewStyle" parent="CardView">
     <item name="cardCornerRadius">4dp</item>
     <item name="cardElevation">4dp</item>
</style>

Set parent attribute to CardView.
 You don't even have to add xmlns:card_view="http://schemas.android.com/apk/res-auto". 
Working snippet of code: 
<style name="CardViewStyle" parent="CardView">
     <item name="cardCornerRadius">4dp</item>
     <item name="cardElevation">4dp</item>
</style>

Bootstrap popover指令和Angularjs的嵌套元素(Bootstrap popover directive and nested element with Angularjs)

最满意答案

相关问答

TCP/IP模型是一个________。[2023-10-02]

CardView中不必要的填充？(Unnecessary padding in CardView?)[2022-06-16]

如何将CardView属性放入样式中？(How to put a CardView attribute in a style?)[2022-11-27]

下列中不属于面向对象的编程语言的是?[2022-05-30]

CardView电梯触摸(CardView lift on touch)[2022-09-19]

在HorizontalScrollView中有很多CardView(many CardView inside a HorizontalScrollView)[2022-10-15]

如何将cardview项目集中到recyclerview中(How to center cardview items into recyclerview)[2021-07-16]

有没有办法将Cardview放入Horizontalscrollview？(is there any way to put Cardview inside Horizontalscrollview?)[2022-08-09]

如何在android中的style.xml文件中设置CardView属性(How to set CardView attributes in style.xml file in android)[2023-04-30]

CardView自定义样式属性(CardView custom style attributes)[2023-12-11]

相关文章

最新问答