Question

AngularJS新手在这里，并希望得到上述帮助。

基本上我的应用程序有一个指令，可以从API加载横幅数据并应用flexslider插件来呈现幻灯片。

我想要实现的是在URL更改时刷新或重新触发此指令，这也会重新触发flexslider。抱歉缺乏更好的术语。原因是不同的横幅应该显示在不同的页面上，我正在相应地调整API调用。

有关如何解决上述问题的任何想法？

感谢所有帮助，谢谢！

以下是代码段：

的index.html

<div id="hero" class="wrapper">
      <hero-container></hero-container>
    </div>

herocontainer.js指令

'use strict';

/**
 * @ngdoc directive
 * @name loadandgoApp.directive:heroContainer
 * @description
 * # heroContainer
 */
angular.module('loadandgoApp')
  .directive('heroContainer', ['$timeout', function($timeout) {
    return {
      template: '<div class="flexslider"><div class="slides"><div hero-item class="slide" ng-repeat="item in headerContent"></div></div></div>',
      restrict: 'E',
      controller: function($scope, ContentService) {
        $scope.headerContent = [];
        ContentService.loadHeaders.then(function(data) {
          $scope.headerContent = data;
        });
      },
      link: function(scope, element) {
        scope.$watch('headerContent', function (val) {
          if (val.length) {
            $timeout(function() {
              angular.element(element).children('.flexslider').flexslider({
                selector: '.slides > .slide',
                start: function() {
                  $('.flexslider').show();
                },
              });
            }, 400);
          }
        });
      }
    };
  }])
;

Answer 1

如果您使用的是ui-router - 每当您放置指向该页面的链接时，请将reload选项设置为true。

<a ui-sref="(state)" ui-sref-opts="{reload: true, notify: true}"> </a>

刷新自定义Angular指令

1 个答案: