angularjs - angularテンプレートで特定のクラスで要素を更新する方法

Question

私は最初のAngularプロジェクトを始めたばかりで、Angular UIを使用して選択可能なJquery UIを通過しています。テンプレート内の 1 つの要素で、現在選択されている要素 (たとえば、「ui.selected」のクラスを持つ要素) のみを更新する最良の方法は何でしょうか?

Answer 1

ディレクティブを使用してこれを解決しました。

app.js で...

mymodule.directive('hotlink', function () {

    return function (scope, element, attrs) {

        scope.$watch(attrs.hotlink, function (value) {
            if(element.parent().hasClass('ui-selected')){
                scope.obj[attrs.hotlink] = value;
                element.val(value);
            }
        });
    }
});

そしてpartial.htmlで...

<div class="row" ng-controller="workspaceCtrl">
<div class="editor four columns">
    <input type="text" placeholder="title" ng-model="title" />
    <textarea placeholder="description" ng-model="description"></textarea>
</div>
<div class="eight columns">
    <ul class="fileObjects" ui-jq="selectable" ui-options="selectOptions">
        <span ui-jq="sortable">
            <li class="item" ng-repeat="obj in fileObjects">
                <input type="text" val="{{obj.title}}" placeholder="title" hotlink="title"/>
                <textarea placeholder="description" hotlink="description">{{obj.description}}</textarea>
            </li>
        </span>
    </ul>

</div>
</div>

現在、要素が現在選択されている場合にのみモデルから更新される条件付きバインディングがあります。