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

私のコメントを精緻化する。だから、私が考えているのは、htmlが変更されたときにdformが自動的にリロードされないということです。あなたはあなたの指示で行うことができますが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サービスでの必要性を排除します。だからあなたのディレクティブは次のようになります。さて、私はこれを試していないので、あなたの側からいくつかの調整が必要になるかもしれませんが、アイデアは今明らかにする必要があります。

UPDATE：

[OK]を、私は（あなたが質問して、次の時間を行う必要があります）demoをやりました。 大きな問題は、htmlプロパティの変更後にconfig.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); 
    }); 
} 

P.S.私はタイムアウトとhttpコールを交換しましたが、それは全く違いはありません。