jQuery函数转换为指令，不能以角度工作 [英] jQuery function converted to directive not working in angular
问题描述
我需要从json文件加载html。因此，我发现 dform 是最佳解决方案。由于它是jQuery插件，我需要在Angular中使用它。我很幸运，我发现它是 jsfiddle 上的指令。
唯一的区别是我有我自己的json文件，并且已经分别编写了代码。我正在使用服务通过http请求从json文件获取数据。
之后，我使用类似于jsfiddle的指令。
app.js
$ b
var app = angular.module（'angularApp'，[]）;
service.js
$ b $ （$ http $）$ b $ this.getLoadedHtml = function（callback）
{
return $ http.get（'../ source / file.json'）
.then（function（res）{
callback（res.data）;
}） ;
}
}]）
controller.js < （'mainCtrl'，['$ scope'，'loaderService'，function（$ scope，loaderService））;
app.controller ）{
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-fluidng-app =angularApp>
< div ng-controller =mainCtrlstyle =background-color：green; margin-top：100px; height：1000px;>
< div class =col-sm-3id =source-area>
< div action =index.htmlmethod =gethtml =fieldsdform>< / div>
< / div>
< / div>
< / div>
file.json
[
{
type：p，
html：您必须登录
}，
{
name：username，
id：txt-username，
caption：用户名，
type ：text，
placeholder：Eg user@example.com
}，
{
name：password，
caption ：密码，
type：密码
}，
{
type：submit，
value：Login
}
]
我也使用jquery和dform库。 / p>
因为我没有任何错误。我的数组在控制器中很好， $ scope.fields 在控制器中也可以正常工作。由我看不到任何HTML呈现？我已经在jsfiddle中使用过。
阐述我的评论。所以我认为发生的事情是，当HTML变化时（不期望它改变），dform不会自动重新加载。你可以在你的指令中做什么，在 html 上观察并在更改时更新dform：
link：function（scope，elm，attrs）{
var config = {
action：scope.action，
method： scope.method，
html：scope.html
};
$ b $ scope。$ watch（'html'，function（）{
elm.dform（config）;
}）;
elm.dform（config）;
}
...
但是等等，还有更多！正如我所提到的，dform还支持从服务器加载外部表单。根据文档，这应该可以通过使用 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 服务中的需求。现在，我还没有试过这个，所以它可能需要从你身边进行一些调整，现在应该清楚这个想法。
UPDATE
strong>：好的，我已经完成了 demo （下次你提问时你应该这样做）。
最大的问题在于 html 属性发生变化后需要重新分配 config.html 。所以我们的 link 函数现在看起来像这样：
link：function函数（）{
if（！scope.html）
return;
var config = {$ b $ scope。$ watch（'html'，function b $ baction：scope.action，
method：scope.method，
html：scope.html
};
$（榆树）.dform（config）;
}）;
}
我用超时替换了http调用，但这绝对没有区别。
I need to load html from json file. So I found dform as best solution for that. Since it's the jQuery plugin and I need that in Angular. I am lucky that I found it's directive on jsfiddle.
The only difference is that I had my own json file and I have written the code separately. I am using service to get data from json file through http request. After that I am using the directive similar to the jsfiddle one.
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"
}
]
I have used jquery and dform library too.
Since I have not got any error. My array is coming fine into controller and $scope.fields is also working fine in controller. By I cannot see any html rendered? I have used the same as in jsfiddle.
Elaborating on my comment. So what I think happens is dform does not reload automatically when the html changes (just not expecting it to change). What you could do in your directive is watch on html and update dform on change:
...
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);
}
...
But wait, there is more! As I mentioned, dform also supports loading external forms from server. According to documentation, that should be possible by using url subscriber. So your directive would look something like this:
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);
}
};
})
This eliminates the need in loader service. Now, I haven't tried this, so it maybe will require some tweaking from your side, by the idea should be clear by now.
UPDATE:
Ok, I've done a demo (which you should do next time you ask the question).
The big problem was that the config.html needed to be reassigned after change in html property. So our link function now looks like this:
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);
});
}
P.S. I have replaced http call with timeout, but that makes absolutely no difference.
这篇关于jQuery函数转换为指令，不能以角度工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
