22

アプリケーションで AngularJS を使用しようとしていますが、ある程度成功しています。

データを取得してユーザーに表示できます。ng-repeatそして、 DELETEリクエストを投稿したいボタンがあります。以下はそれを行う私のコードです。

<div class="navbar-collapse collapse">
    <table class="table table-striped" ng-controller="FetchViewData">
        <tr>
            <td>Name</td>
            <td>ID</td>
            <td>Department</td>
            <td></td>
        </tr>
        <tr ng-repeat="d in viewData">
            <td>{{d.EmployeeName}}</td>
            <td>{{d.EmployeeID}}</td>
            <td>{{d.EmployeeDepartment}}</td>
            <td>
                <button class="trashButton" type="button" 
                name="view:_id1:_id2:_id14:_id24:btnDelete" 
                id="view:_id1:_id2:_id14:_id24:btnDelete" 
                ng-click="deleteRecord('{{d['@link'].href}}')">
                <img src="/trashicon.gif"></button>
            </td>
        </tr>
    </table>
</div>

これは、FetchViewData情報を取得してユーザーに表示する関数です。

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
}

データが取得され、適切に表示されます。

ただし、削除ボタンをクリックしてもコードはng-click="deleteRecord('{{d['@link'].href}}')"起動しません。Google Chrome の開発者ツールでは、コードに対して有効な値が生成されていることを確認できます{{d['@link'].href}}が、コードは実行されdeleteRecordません。この質問から、中括弧を削除して書き込みのみを試みましd['@link'].hrefたが、うまくいきませんでした。

関数に置き換えるng-clickとonclick、deleteRecord起動されます。

function deleteRecord(docURL) {
    console.log(docURL);

    $http.delete(docURL);
}

しかし、その後、以下のエラーが表示されます。

Uncaught ReferenceError: $http is not defined
deleteRecord
onclick

jQuery 1.10.2 と AngularJS v1.0.8 を使用しています。

4

7 に答える 7

26

ここでの FetchViewData はコントローラーであり、ng-controller="FetchViewData" がある html では、そのコントローラーのスコープ内で角度のあるメソッドと変数を探すように指示しています。

つまり、クリック時にメソッドを呼び出したい場合は、コントローラーのスコープにアタッチされた何かを呼び出す必要があります。

function FetchViewData($scope, $http) {
    var test_link = "<MY LINK>";
    $http.get(test_link).success( function(data) {
        $scope.viewData = data;
    });
    $scope.deleteRecord = function(docURL) {
        console.log(docURL);

        $http.delete(docURL);
    }   
}

ここでは、関数がスコープに存在し、FetchViewData コントローラー内にあるすべての html がそのスコープにアクセスできるため、メソッドを呼び出すことができるはずです。

関数がグローバル名前空間に存在するため、オンクリックを使用すると機能します。これは、オンクリックが表示される場所です。Angular は、名前空間をきれいに保つためにスコーピングに大きく依存しています。ここには多くの情報があります: https://github.com/angular/angular.js/wiki/Understanding-Scopes

于 2013-10-22T08:22:53.717 に答える
4 
  function deleteRecord(docURL) {
       console.log(docURL);

       $http.delete(docURL);
 }

そのはず

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

編集: html とコントローラーで何かを変更します ....

実際のデモを見る

于 2013-10-22T08:20:55.623 に答える
1

ng-clickが起動しない理由のもう 1 つの可能性はpointer-events:none;、要素に CSS スタイルを適用していることです。Bootstrap のform-control-feedbackクラスがそのスタイルを適用していることを発見しました。そのため、要素がクリックのために前に来るように を 2上げても、z-indexマウス クリックが無効になります!

そのため、フレームワークがどのように相互作用するかに注意してください。

于 2016-11-10T22:29:04.800 に答える
0

前述のように、関数はスコープ内で作成する必要があります。

 $scope.deleteRecord = function (docURL) {
         console.log(docURL);

         $http.delete(docURL);
}

関数を使用するには、ng-repeat 内から使用しているため、最初に「{{ }}」をドロップします。もう 1 つの問題は、コードでのアポストロフィの使用です。2 つのペアが 1 つ、もう 1 つの中にあります...まあ、それで問題が発生すると確信しています。

次のように関数を使用します。

ng-click="deleteRecord(d['@link'].href)"

頑張ってください！

于 2014-01-26T10:58:04.390 に答える
0

送信ボタンとして使用する場合は、タイプを次のように「送信」に設定します。

<button type="submit" ...
于 2015-04-01T13:54:51.670 に答える