异步远程 content 的angular service 。

README.md

使用例子

例子1

  <div
    remote-content
    remote-href="{{'mobile/module_list/' + descItem.id}}"
    remote-modal="formData.list[{{$index}}].modal"
    remote-callback="remoteCallBack">
    <p ng-if="formData.list[{{$index}}].modal.id" class="text-sm text-mute text-right">
      modal: {{formData.list[{{$index}}].modal}}
    </p>
  </div>

例子2

  <span
    remote-content
    remote-href="{{'mobile/post/' + banner.id}}"
    remote-attr="title">
    {{banner.id}}
  </span>
 */

remote_content.js

/*
  无敌 remote content 的形式。
 */

import _ from 'lodash';
import angular from 'angular';

export default angular.module('services.remoteContent', [])
.directive('remoteContent', ($http, API_URLS) => {

  return {
    priority: -1,
    restrict: 'A',
    link ($scope, $element, $attrs) {

      let getContent = () => {
        let remoteHref = $attrs.remoteHref;
        let remoteAttr = $attrs.remoteAttr;
        let remoteModal = $attrs.remoteModal;
        let remoteCallback = $attrs.remoteCallback;

        if (!remoteModal && (!remoteHref || !remoteAttr)) {
          $element.html('');
        }
        else {
          if (!remoteHref.match(/^(http:|https:)\/\//)) {
            remoteHref = API_URLS.hostname + remoteHref.replace(/^\/+/, '');
          }

          return $http({
            url: remoteHref,
          }).then((response) => {
            let data = _.get(response, 'data.data') || {};

            if (remoteCallback && $scope.$eval(remoteCallback) && angular.isFunction($scope.$eval(remoteCallback))) {
              data = $scope.$eval(remoteCallback)(data);
            }

            if (remoteAttr) {
              $element.html(_.get(data, remoteAttr) || '');
            }

            if (remoteModal) {
              _.set($scope, remoteModal, data);
            }

          }, () => {});
        }
      };

      $attrs.$observe('remoteHref', () => {
        getContent();
      });

      $attrs.$observe('remoteAttr', () => {
        getContent();
      });

      $attrs.$observe('remoteModal', () => {
        getContent();
      });

      $attrs.$observe('remoteCallback', () => {
        getContent();
      });

    }
  };

});