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函数转换为指令不能在角度工作的主要内容,如果未能解决你的问题,请参考以下文章

Jquery 1.4:两个函数不能在同一页面上一起工作

为啥 atoi 函数不能将 const char * 转换为 int?

jQuery $.ajax 函数可以工作,但像 $.get/$.getJSON 这样的速记函数不能——使用 jQuery 1.7.2 和 Grails 2.1 和 twitter bootstrap

角度 2 中的函数

jQuery对象与dom对象的转换-$('#id)[0]

文件大小转换字节到 kb/mb/gb 函数不能按预期工作