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

Posted 2023-03-05

【中文标题】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. [e-mail]"
  ,
  
    "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 值？

请查看更新后的答案。现在应该很清楚该怎么做了。