jQuery函数转换为指令不能在角度工作

Question

我需要从 json 文件加载 html。所以我发现dform 是最好的解决方案。因为它是 jQuery 插件，我在 Angular 中需要它。我很幸运在jsfiddle 上找到了它的指令。

唯一的区别是我有自己的 json 文件，并且我已经单独编写了代码。我正在使用服务通过 http 请求从 json 文件中获取数据。 之后，我使用类似于 jsfiddle 的指令。

app.js

var app = angular.module('angularApp', []);

service.js

app.service('loaderService', ['$http', function ($http) {
    this.getLoadedHtml = function (callback)
    {
        return $http.get('../source/file.json')
           .then(function (res) {
               callback(res.data);
           });
    }
}])

controller.js

app.controller('mainCtrl', ['$scope', 'loaderService', function ($scope, loaderService) {
    loaderService.getLoadedHtml(function (data) {
        $scope.fields = data;
    });
}]);

directive.js

app.directive('dform', function () {
    return {
        scope: {
            action: '@',
            method: '@',
            html: '='
        },
        link: function (scope, elm, attrs) {
            var config = {
                "action": scope.action,
                "method": scope.method,
                "html": scope.html
            };
            elm.dform(config);
        }
    };
})

index.html

<div class="container-fluid" ng-app="angularApp">
        <div ng-controller="mainCtrl" style="background-color:green; margin-top:100px; height:1000px;">
            <div class="col-sm-3" id="source-area">
                <div action="index.html" method="get" html="fields" dform></div>
            </div>
        </div>
    </div>

file.json

[
  {
    "type": "p",
    "html": "You must login"
  },
  {
    "name": "username",
    "id": "txt-username",
    "caption": "Username",
    "type": "text",
    "placeholder": "E.g. user@example.com"
  },
  {
    "name": "password",
    "caption": "Password",
    "type": "password"
  },
  {
    "type": "submit",
    "value": "Login"
  }
]

我也使用过 jquery 和 dform 库。

因为我没有任何错误。我的数组在控制器中运行良好，并且 $scope.fields 在控制器中也运行良好。通过我看不到任何呈现的 html？我用的和 jsfiddle 一样。

Answer 1

详细说明我的评论。所以我认为发生的是 dform 不会在 html 更改时自动重新加载（只是没想到它会改变）。您可以在指令中执行的操作是关注 html 并在更改时更新 dform：

...
link: function (scope, elm, attrs) {
    var config = {
        "action": scope.action,
        "method": scope.method,
        "html": scope.html
    };

    scope.$watch('html', function() {
        elm.dform(config);
    });

    elm.dform(config);
}
...

但是等等，还有更多！正如我所提到的，dform 还支持从服务器加载外部表单。根据documentation，这应该可以通过使用 url 订阅者来实现。所以你的指令看起来像这样：

app.directive('dform', function () {
  return {
    scope: {
        action: '@',
        method: '@',
        url: '='
    },
    link: function (scope, elm, attrs) {
        var config = {
            "action": scope.action,
            "method": scope.method,
            "url": scope.url
        };
        scope.$watch('url', function() {
          elm.dform(config);
        });

        elm.dform(config);
    }
  };
})

这消除了loader 服务的需要。现在，我还没有尝试过，所以可能需要您进行一些调整，现在这个想法应该很清楚了。

更新：

好的，我已经完成了demo（下次您提出问题时应该这样做）。 最大的问题是config.html 需要在html 属性更改后重新分配。所以我们的link 函数现在看起来像这样：

link: function(scope, elm, attrs) {
  scope.$watch('html', function() {
    if (!scope.html)
      return;
    var config = {
      "action": scope.action,
      "method": scope.method,
      "html": scope.html
    };

    $(elm).dform(config);
  });
}

附：我已经用超时替换了 http 调用，但这完全没有区别。