4

AngularJSは初めてです。長い間、私はいつもJavascriptを使用していた方法でそれを悪用しようとしました-JQueryやMootoolsのようなフレームワーク。これで、もうそのようには機能しないことがわかりました...しかし、私は常にCMSを使用してHTML出力を生成するため、いくつかの大きな問題に遭遇しました。

したがって、最初に出たときはかなり静的です...小さな例：

<ul>
 <li>foo <span>delete</span></li>
 <li>bar <span>delete</span></li>
 <li>blub <span>delete</span></li>
</ul>

双方向データバインディングとは、Angular ScopeとControllerを使用してビューを生成できるだけでなく、ビューによってモデルを生成できることを意味すると思いました。

私はそこで何か混乱するかもしれません...それでここに私の質問があります。CMSからの静的HTML出力からモデルを開始する方法はありますか？

私はこのようなことを試みました...

<ul ng-controller="Ctrl">
 <li ng-init="item[0].name=foo">{{item[0].name}} <span ng-click="remove(0)">delete</span></li>
 <li ng-init="item[1].name=bar">{{item[1].name}} <span ng-click="remove(1)">delete</span></li>
 <li ng-init="item[2].name=blub">{{item[2].name}} <span ng-click="remove(2)">delete</span></li>
</ul>

そして、私のコントローラーで、削除関数を作成しました。しかし、それが削除したとき、それは名前を削除しただけでした...スパンボタンはまだそこにありました

ただし、データをjavascript-arrayとして定義し、出力全体をng-repeatを使用してAngular経由で実行した場合は機能しました...次のようになります。

<ul ng-repeat="it in item">
 <li>{{it.name}} <span ng-click="remove($index)">delete</span></li>
</ul>

私がここでポイントを作って、みんなが私の難しさと問題を抱えていることを願っていますか？私がそこで試みていたことが可能かどうか誰かに教えてもらえますか？

4

2 に答える 2

9

これは、Angularやそのような他のフレームワークに適応する人々が抱える一般的な問題です。

HTMLをレンダリングするためにサーバーはもう必要ありません。テンプレートを設定し、適切なデータをスコープにロードするだけです。

<ul ng-controller="Ctrl" ng-init="getMyItems()">
 <li ng-repeat="item in items">{{item.name}} <a ng-click="remove($index)">delete</a></li>
</ul>

そして、あなたのコントローラーであなたはこのようなことをするでしょう

app.controller('Ctrl', function($scope, $http) {
   $scope.items = [];
   $scope.getMyItems = function(){
       $http.get('/my/json/stuff/url').success(function(data) {
           $scope.items = data;
           $scope.$apply();
       });
   };
});

「しかし、JSONを取得するために個別のリクエストを行いたくないのですが、それで問題ありません（おそらく無関係ですが、問題ありません）...必要なのはグローバル変数に貼り付けることだけです。代わりに$windowを使用して取得します。

于 2012-11-01T17:16:52.637 に答える
0

コードについて話しましょう。これは、MySQLからのデータにバインドされているプロフィール写真を表示するリアルタイムアプリです。MySQL（モデル）ビュー（HTML）で何かが変更されると、更新されます。

app.controller('two_way_control',function($scope,$http,$interval){
load_pictures();
$interval(function(){
load_pictures();
},300);
function load_pictures(){
$http.get('http://localhost:3000/load').success(function(data){
$scope.profile_pictures=data;
});
};

これがHTMLです

<div id="container" ng-app='two_way' ng-controller='two_way_control'>
      <div class="row" ng-repeat="data in profile_pictures">
        <div class=".col-sm-6 .col-md-5 .col-lg-6">
          <h4>User Say's</h4><hr>
          <p>
            This is a Demo feed. It is developed to demonstrate Two way data binding.
          </p>
          <img src="{{data.profile_picture}}">
        </div>
      </div>
    </div>

詳細： http ：//codeforgeek.com/2014/09/two-way-data-binding-angularjs/

それが役に立てば幸い ！

于 2015-01-30T06:51:48.093 に答える