如何在指令内链接ng-models？

Question

链接在我的问题LINK

中查看可视化

我完全迷失了。已经阅读了大量的SO回复（最接近的问题是here）

HTML：

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

我需要展示＆amp;编辑（通过自定义指令）日期值;
如何使用 INNER ng-model（ ??? <<绑定（双向）我的 OUTER ng-model（ tabsData.employment_start_date ） / strong>）<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上的实际表达式执行结果强>财产）

伙计帮助;）

Answer 1

他们可以通过使用所谓的＆＃34;隔离范围＆＃34;在你的指令内。如果您需要了解一下，Egghead.io有几个视频，解释使用隔离范围绑定变量的不同方法。

我做了类似你所要求的事情。它看起来像这样：

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

＆＃34; foo＆＃34;和＆＃34; bar＆＃34;我在我的＆＃34; MyCtrl＆＃34;上传递了变量的名称。我想与血腥指令分享。然后在指令中我必须执行以下操作：

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

＆＃34; scope.MYFOO＆＃34;指令内部是对＆＃34; MyCtrl。$ scope.foo＆＃34;的引用。您在其中所做的任何更改都将反映在另一个中。

垮台，如果＆＃34; foo＆＃34;是一个不可变的对象（如字符串或数字或布尔或日期），然后这将无法正常工作。您需要将这些基元嵌套在可以变异的实际对象中，然后绑定到该对象并在该指令中引用它的子对象。如果您需要了解更多，请告诉我。