0

私の質問の視覚化を見るためのリンク リンク

私は完全に迷っています。SOの返信をたくさん読んだ（最も近い問題はここにあった）

html:

<div  title="Employment start date"
                        ng-model="tabsData.employment_start_date" 
                        input-date="{{dateFormats.getCurFormat()}}"></div>

(カスタム ディレクティブで) 日付値を表示および編集する必要があります。OUTER ng-model ( tabsData.employment_start_date ) をINNER ng-model ( ??? ) で
(双方向に) バインドする方法は? <datepicker>

（以下のスニペットのng-model<---------- HERE !!! attrへの署名タグレットを参照してください。ここでは、双方向バインディングを過去に渡す必要があります）<datepicker>

ある種のディレクティブを持つ：

directive('inputDate', function factory(dateFilter) {
    return {
                require:'^ngModel',
                restrict:'A',
                replace: true,

    template:'<div class="control-group">
        <div class="controls">
            <label>{{title}}</label>
            <input class="dateInputValue"
                    ng-model="formattedDate"
                    readonly
                    ng-click="showPicker=!showPicker"/>
            <div class="datePickerBlock">
                <button class="datePickerBtn"
                        ng-click="showPicker=!showPicker">
                    <i class="whhg icon-calendar"></i>
                </button>
                <datepicker
                        class="datePicker"
                        show-hide="{{showPicker}}"

                        ng-model=" ??? "  <--------------------- HERE !!!!

                        show-weeks="true"
                        starting-day="1"
                        date-disabled="disabled(date, mode)">
                </datepicker>
            </div>
        </div>
    </div>',

                link:function (scope, elm, attrs, ngModelCtrl) {

                    ngModelCtrl.$formatters.unshift(function (modelValue) {
                        scope.formattedDate = dateFilter(modelValue, attrs.inputDate || 'medium');
                        return scope.formattedDate;
                    });

                    ngModelCtrl.$parsers.unshift(function(viewValue) {
                        var date = new Date(viewValue);
                        return isNaN(date) ? '' : date;
                    });
                }
    };
});

さらに、2 番目の質問に加えて、テンプレートをtemplateUrlプロパティに置き換えると、次を
templateUrl: '/cached/ui-elements/inputBool.html'参照するのはなぜですか。

/* Template */
angular.module("/cached/ui-elements/inputDate.html", []).run(["$templateCache", function($templateCache) {
    $templateCache.put("/cached/ui-elements/inputDate.html",
       "<div class=\"controls\">\n"+
          "<input class=\"dateInputValue\" " +
                  "ng-model=\"ngModelLocal\" " +
                  "readonly " +
                  "ng-click=\"showPicker=!showPicker\"/>\n"+
           <MY-DATEPICKER ng-model="ngModelLocal"></MY-DATEPICKER>
       "</div>"
}]);

attrs.dateFormatは{{dateFormats.getCurFormat()}} STRING と同じです! (以前のテンプレートプロパティのように $scope で実際の式の実行結果を返すことはありません)

みんな助けて ;)

4

1 に答える 1

1

これを行う方法は、ディレクティブ内で「Isolate Scope」と呼ばれるものを使用することです。少し理解する必要がある場合、Egghead.io には、isolate スコープを使用して変数をバインドするさまざまな方法を説明するいくつかのビデオがあります。

私はあなたが求めているようなことをしました。次のようになります。

<div ng-controller="MyCtrl">
    --some additional html--
    <div my-directive="blah" foo="scopevar1name" bar="scopevar2name"></div>
    --some additional html--
</div

「foo」と「bar」を使用して、血まみれのディレクティブと共有したい「MyCtrl」の変数の名前を渡します。次に、ディレクティブ内で次のことを行う必要があります。

.directive('inputDate', function factory(dateFilter) {
    return {
            require:'^ngModel',
            restrict:'A',
            replace: true,
            scope:{
                "MYFOO" : "=foo",
                "MYBAR" : "=bar"
            },
            template: "your html here",

            link:function (scope, elm, attrs) {
                IN HERE YOU CAN USE "scope.MYFOO" and "scope.MYBAR"
            }
    };
});

ディレクティブ内の「scope.MYFOO」は、「MyCtrl.$scope.foo」への参照です。一方に加えた変更は、他方にも反映されます。

「foo」が変更不可能なオブジェクト（文字列、数値、ブール値、日付など）の場合、これは機能しません。これらのプリミティブを変更可能な実際のオブジェクト内にネストしてから、オブジェクトにバインドし、ディレクティブ内でその子を参照する必要があります。それをさらに理解する必要がある場合は、お知らせください。

于 2013-07-11T14:49:56.570 に答える