如何在指令中链接ng模型

Question

链接查看我的问题的可视化链接

我完全迷路了。已阅读大量SO回复（最接近的问题是此处）

html:

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

我需要展示&编辑（通过自定义指令）日期值
如何在<datepicker>上将我的OUTERng模型（tabsData.employment_start_date）与INNERng模型（？？？？

（请参阅下面的<---------- HERE !!!符号标记到我需要通过双向绑定的代码段中<datepicker>的ng模型属性）

具有某种指令：

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()}}字符串（没有像以前那样使用模板属性在$scope上返回实际的表达式执行结果）

伙计们帮忙；）

Answer 1

实现这一点的方法是在指令中使用所谓的"隔离范围"。如果你需要了解一些，Egghead.io有几个视频解释了使用隔离作用域绑定变量的不同方法。

我做了一些像你要求的事情。它看起来像这样：

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

使用"foo"one_answers"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.MIFOO"是对"MyCtrl.$scope.foo"的引用。您在其中一个中所做的任何更改都将反映在另一个中。

向下，如果"foo"是一个不可变的对象（比如字符串、数字、布尔值或日期），那么这将不起作用。您需要将这些基元嵌套在一个可以变异的实际对象中，然后绑定到该对象并在指令中引用它的子对象。如果你需要了解更多，请告诉我。