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>？

（请参阅下面<---------- HERE !!!的标记标记到我需要通过双向绑定的片段中<datepicker>的ng-model attr）

有某种指令：

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;
                    });
                }
    };
});

除了我的第二个问题，为什么当我将模板替换为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

They way that you can do this is by using what is called "Isolate Scope" inside of your directive. If you need to understand a bit about, Egghead.io has several videos explaining the different ways to bind variables using the isolate scope.

I have done something like what you are asking for. It looks something like this:

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

With "foo" and "bar" I pass in the name of the variables on my "MyCtrl" that I want to share with the bloody directive. Then inside the directive I have to do the following:

.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" inside the directive is a reference to "MyCtrl.$scope.foo". Any changes you make in one will be reflected in the other.

Downfall, if "foo" is a non-mutable object (like a string or number or boolean or date) then this will not work. You will need to nest those primitives inside of the an actual object that can be mutated, and then bind to the object and reference it's children inside the directive. If you need to understand that more, let me know.

于 2013-07-11T14:49:56.570 回答