jQuery函数转换为指令不能在角度工作
Posted
技术标签:
【中文标题】jQuery函数转换为指令不能在角度工作【英文标题】:jQuery function converted to directive not working in angular 【发布时间】:2017-05-10 10:33:32 【问题描述】:我需要从 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 一样。
【问题讨论】:
使用 jquery 插件的方法毫无意义。 json 看起来像什么以及它的预期结果是什么。这应该可以使用角度模板和一些数据映射轻松实现 @charlietfl 为什么它在 jsfiddle 中运行?问题是,为什么不在我的代码中运行? 但是你为什么要这样做呢?强烈建议您阅读***.com/questions/14994391/… 我知道将 Jquery 与 Angular js 一起使用并不是一个好习惯。我无法在 Angular 中找到这个插件的替代品。 虽然我同意其他评论员的观点,但对于您的具体问题,我敢打赌,问题是elm.dform(config);
只运行一次,它不知道 html 更改。所以我会尝试在html
属性上创建一个$watch
,然后在回调中再次调用elm.dform(config);
。
【参考方案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 调用,但这完全没有区别。
【讨论】:
感谢您的宝贵时间,我处于无法直接从服务器加载它的情况。我也添加了观察者,但它给了我同样的输出,什么都不是。只有我进入 html 是表单标签,里面什么都没有。 您能否在 html 属性的$watch
表达式中控制台记录新值?您确定您从服务器获取字段并将其放入指令中吗?
我在 html 属性中一无所获,解决方法是我需要在指令的范围内再次从服务中获取 html。$watch
。我重新分配了新的 html,它工作得很好。有什么方法可以让我在$watch
下获得scope.fields
的新值,即在控制器更改后我需要更新指令中的html 值?
请查看更新后的答案。现在应该很清楚该怎么做了。以上是关于jQuery函数转换为指令不能在角度工作的主要内容,如果未能解决你的问题,请参考以下文章
为啥 atoi 函数不能将 const char * 转换为 int?
jQuery $.ajax 函数可以工作,但像 $.get/$.getJSON 这样的速记函数不能——使用 jQuery 1.7.2 和 Grails 2.1 和 twitter bootstrap