每次路由更改时，AngularJS 都会运行一个指令答案

【问题标题】：AngularJS run a directive every time the route changes每次路由更改时，AngularJS 都会运行一个指令
【发布时间】：2018-06-24 06:04:00
【问题描述】：

指令：

app.directive('chatAssistant', chatAssistant);

chatAssistant.$inject = ['$rootScope', '$state'];

function chatAssistant($rootScope, $state) {
  return {
    link: function() {
      let listener = function() {
        !(function(g, s, q, r, d) {

          r = g[r] = g[r] || function() {
            (r.q = r.q || []).push(arguments);
          };

          d = s.createElement(q);
          q = s.getElementsByTagName(q)[0];
          d.src = '//placeholder.cloudfront.net/tracker.js';
          q.parentNode.insertBefore(d, q);
        })(window, document, 'script', '_gs');

        _gs('GSN-XXXXXX-N');

        if ($state.current.name === 'login' ||
            $state.current.name === 'register' ||
            $state.current.name === 'forgotPassword' ||
            $state.current.name === 'passwordReset') {
          _gs('set', 'chat', {button: false});
        } else {
          _gs('set', 'chat', {button: true});
        }
      };
      $rootScope.$on('$viewContentLoaded', listener);
    },
  };
}

插入的 HTML：

<div ui-view
     chat-assistant>

当包含该指令的 DOM 或 <div> 被加载时，该指令仅运行 Javascript 代码。它工作得很好，但我需要指令在每次路由更改时基本上刷新或重新运行。本质上，它根据您在 if/else 语句中看到的路线显示/隐藏元素。

它目前有效，但您必须手动刷新页面才能重新运行指令并让元素显示您是否在应该显示的页面上。

TLDR：每次路由更改时，我都需要重新运行此指令。

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

您可以在每次路线更改时在route.js 文件中执行此操作，您需要调用函数chatAssistant()。通过使用解析，您可以检查用户是否经过身份验证。

这是一个简单的演示。：-

route.js

App.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  $urlRouterProvider.otherwise('default');
  $stateProvider.
    .state('userDashboard', {
    url: '/userDashboard',
    title: 'User Dashboard',
    templateUrl: 'userDashboard.html',
    resolve: {
      chatAssistant: chatAssistant
    },
    controller: 'userDashboardController'
  })
});

在最后一个外部App.config之后添加函数来调用每个路由变化

var chatAssistant = function($rootScope, $state) {
  return {
    link: function() {
      let listener = function() {
        !(function(g, s, q, r, d) {
          r = g[r] = g[r] || function() {
            (r.q = r.q || []).push(arguments);
          };

          d = s.createElement(q);
          q = s.getElementsByTagName(q)[0];
          d.src = '//placeholder.cloudfront.net/tracker.js';
          q.parentNode.insertBefore(d, q);
        })(window, document, 'script', '_gs');
        _gs('GSN-XXXXXX-N');
        if ($state.current.name === 'login' ||
            $state.current.name === 'register' ||
            $state.current.name === 'forgotPassword' ||
            $state.current.name === 'passwordReset') {
          _gs('set', 'chat', {
            button: false
          });
        } else {
          _gs('set', 'chat', {
            button: true
          });
        }
      };
      $rootScope.$on('$viewContentLoaded', listener);
    },
  };
}

【讨论】：