标签: angularjs-material

题:

如何$mdToast在不触发错误的情况下在拦截器内部使用？

建立:

拦截器定义:

(function () {
  'use strict';

  angular
    .module('app.components.http-errors-interceptors')
    .factory('HttpError500Interceptor', HttpError500Interceptor);

  /* @ngInject */
  function HttpError500Interceptor($q,
                                   $mdToast,
                                   $filter) {

    var interceptor           = {};
    interceptor.responseError = responseError;

    function responseError(responseError) {
      if (responseError.status === 500) {
        $mdToast.show($mdToast.simple()
                              .content($filter('translate')('APP.COMPONENTS.HTTP_ERRORS_INTERCEPTORS.500'))
                              .position('bottom right')
                              .hideDelay(5000));
      }
      return $q.reject(responseError);
    }

    return interceptor;
  }
})();

拦截器配置:

(function () {
  'use strict';

  angular
    .module('app.components.http-errors-interceptors')
    .config(moduleConfig);

  /* @ngInject */
  function moduleConfig($httpProvider) {
    $httpProvider.interceptors.push('HttpError500Interceptor');
  }
})();

问题:

当我加载应用程序时,它会触发以下错误:

未捕获错误:[$ injector:cdep]找到循环依赖项:$ http < - $ templateRequest < - …

我无法覆盖cssfor <md-progress-linear>。

他们有以下代码来设置文件height中的进度条sass：

$progress-linear-bar-height: 5px !default;

md-progress-linear {
  height: $progress-linear-bar-height;
}

即使我改变5px了1px它仍然没有改变。忽略高度，也不会改变任何东西。

即使我把它放在我自己的sass文件中，它也不会覆盖它：

md-progress-linear {
  height: 2px !important;
}

我在这里忽略了什么吗？

$progress-linear-bar-height: 1px !default;

md-progress-linear {
  display: block;
  position: relative;
  width: 100%;
  height: $progress-linear-bar-height;

  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

 <md-progress-linear md-mode="indeterminate" ng-if="showLoader"></md-progress-linear>

目标:使用组件而不是使用$ scope来设置数据.没有要共享的错误,问题是对话框加载组件时未设置数据元素.屏幕截图显示了对话框的当前状态,应该在选项卡#2(信息)中绑定一个对象.在使用onComplete事件加载对话框后,我可以验证对象(文档)是否可用.我试图通过以下方式将对话框调用可用的数据绑定到组件:

1使用当地人:

  locals: {
         document: document     
  },
  bindToController: true,
  onComplete: function(){
                    console.log('document: %O', document);
  }

2使用绑定:

   bindings: {
         document: '='
    }

3使用解决方法:

  resolve: {
              document: function() {
                          return document;
                        }
            }

组件:

我相信错误在这里,绑定,"旧方式"使用$ scope vars所以绑定毫不费力地连接.

(function(){
'use strict';
angular.module('adminClientApp')
.component('documentEdit', {
    templateUrl: 'js/app/components/document/documentEdit/document-edit.html',
    controller: function DocumentEditController($mdToast, $mdMedia) {
       var var documentEdit = this;
        documentEdit.document;

       },
       bindings: {
         document: '<'
       }
    });
  })();

对话框调用

DialogController中只有$ mdDialog事件.我意识到locals和bindToController都是针对对话框中指定的控制器(DialogController).我在这里难过 - 如何设置/传递/连接文件到组件控制器？

   this.showEdit = function ($event, document) {
                var parentEl = angular.element(document.body);

                $mdDialog.show({
                            parent: …

使用角度和材料设计，我注意到，当您聚焦输入然后单击外部（没有什么特别的）时：

• 在桌面上，焦点从输入中移除
• 在移动设备（android）上，焦点保持不变

这在移动设备上真的很烦人，因为有一个聚焦的 md-autocomplete，虚拟键盘会向上滑动并占据可用高度的一半。并且没有办法隐藏它，除非点击另一个字段或按钮！

我真的不明白为什么移动设备不应该像桌面一样运行。当用户点击外部或选择一个元素时，有没有办法失去焦点？

我正在使用Angular Material,我使用$ mdDialogProvide创建了一个简单的预设对话框:

angular.module('starterApp').config([
  '$mdDialogProvider',
  function ($mdDialogProvider) {
    $mdDialogProvider.addPreset('warning', {
      options: function () {
        return {
          template:
          '<md-dialog>' +
          '{{dialog.warning}}' +
          '</md-dialog>',
          controllerAs: 'dialog',
          theme: 'warning'
        };
      }
    });
  }
]);

我想在调用它时传递一条警告信息.我试图传递一条消息,例如:

    $mdDialog.show(
      $mdDialog.warning({
        locals: {
          warning: 'Warning message'
        }
      })
    );

但是不起作用.

实际上我检查了很多解决方案,但没有一个能正常工作.文档中也没有这样的例子.

是否可以将某些日期传递给预设对话框？

我有一个带输入字段的$ mdDialog.在关闭$ mdDialog之前,将保存输入字段的内容.因此,当用户按下"关闭"按钮时,将调用一个函数对数据执行某些操作并保存它们.但是,我无法在ESC上检测到$ mdDialog的关闭.是否可以在$ mdDialog控制器中使用ESC检测关闭事件？

这是示例代码. Codepen链接

angular.module('MyApp', ['ngMaterial'])

.controller('AppCtrl', function($scope, $mdDialog, $rootScope) {
  //$rootScope is used only of this demo
  $rootScope.draft = '  ';

  $scope.showDialog = function(ev) {
    var msgDialog = $mdDialog.show({
      controller: 'DemoDialogCtrl',
      template: "<md-input-container><label>Text</label><input type='text' ng-model='myText' placeholder='Write text here.'></md-input-container><md-button ng-click='close()'>Close</md-button>",
    })

  };


});

(function() {
  angular
    .module('MyApp')
    .controller('DemoDialogCtrl', DemoDialogCtrl);

  DemoDialogCtrl.$inject = ['$scope', '$rootScope', '$mdDialog'];

  function DemoDialogCtrl($scope, $rootScope, $mdDialog) {


    $scope.close = function() {
      //$rootScope is used only of this demo
      // In real code, there are some …

我正在尝试在AngularJS中创建一个多项目响应式滑块。我对Owl Carousel（https://owlcarousel2.github.io/OwlCarousel2/）和Slick Slider（http://kenwheeler.github.io/slick/）很熟悉，但是它们都使用jQuery，而我想要一些没有jQuery的东西。

请提出任何指令或滑块，或任何其他简单的方法。

我想实现以下输出：

谢谢！

第一次用$ mdDialog工作我习惯用外部HTML模板创建一个对话框.

到目前为止,这么好,...它的工作模板可以打开,但在HTML中的ng-click不再工作.

我找不到它的原因.

在userController中调用mdDialog,如下所示:

<md-icon
        layout="row"
        flex md-font-set="material-icons"
        class="active"
        ng-click="vm.showMenu($event)">
    menu
</md-icon>

在userController中打开$ mdDialog的方法:

vm.showMenu = function showMenu(ev){

    $mdDialog.show({
        controller: MenuDialogController,
        templateUrl: 'app/components/head/user/menu.dialog.html',
        parent: angular.element($document.body),
        targetEvent: ev,
        clickOutsideToClose:true,
        fullscreen: $scope.customFullscreen // Only for -xs, -sm breakpoints.
    })
        .then(function(answer) {
            $scope.status = 'You said the information was "' + answer + '".';
        }, function() {
            $scope.status = 'You cancelled the dialog.';
        });
};

这是对话框的对话框控制器,按钮不起作用:

angular
    .module('trax')
    .controller('MenuDialogController', MenuDialogController);

function MenuDialogController() {

    var vm = this;

    vm.close = function close(){
        alert('close …

这是我的代码:如何在元素框中单击时仅旋转带有角度的svg-arrow？

<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
  <md-card-content layout="row" layout-align="start center">
    <img src="../assets/icons/cd-icon-arrow.svg" class="buildrag-toggle">
    <h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
    <md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)">
      <md-icon>add_circle_outline</md-icon>
    </md-button>
  </md-card-content>
</md-card>

这是我的按钮

我在parent.html页面中使用以下HTML结构(并为此父HTML页面设置了相应的Controller)

<md-tabs md-dynamic-height class="report-tabs" layout-align="center stretch" md-no-pagination="true">
<md-tab>
    <md-tab-label>
        <span class="tab-label">Tab 1</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-include="tab1-page-URL"></div>
    </md-tab-body>
</md-tab>
<md-tab>
    <md-tab-label>
        <span class="tab-label">Tab 2</span>
    </md-tab-label>
    <md-tab-body>
        <div ng-include="tab2-page-URL"></div>
    </md-tab-body>
</md-tab>

目前,当我加载此parent.html页面时,所有选项卡的所有内容都在开始时加载.

1. 在激活(当选择/点击)选项卡的内容时,我们是否有延迟加载？

2. 如果我们没有这样的规定,当选择特定标签时,如何调用子选项卡控制器的功能？目前所有子选项卡控制器的所有功能都被调用 - 这是耗时的,并且不需要用户只有在页面完成编译和渲染时才能看到第一个选项卡？

我已尝试在parent.html页面上调用Child-tab控制器函数,但除非未加载所有md-tab内容,否则无法访问子控制器中的任何内容.此页面中只有可访问的部分将是parent.html自己的控制器功能.

如果有任何其他方式我可以继续,请告诉我,或者我在这里完全遗漏了什么？谢谢.