Как связать переменную event.time в родительской области из директивы с изолированной областью без использования $parent в директиве?

angular.module('hfp.calendar')
    .controller('printPreviewCntrl', ['$scope', 'htmlFromServer',
     function($scope, htmlFromServer){

         $scope.htmlReceived = htmlFromServer;
            $scope.event = {};

}])
.directive('compile', function($compile, $timeout) {

    return {
     restrict: 'A',
  link: function(scope, element, attrs) {
   $timeout(function() {
    element.html(scope.$eval(attrs.compile));
    $compile(element.contents())(scope);
   });
  }
 };

})
.directive('initModel', function($compile) {

 return {
  restrict: 'A',
  scope: {
   eventField: '=initModel'
  },
  link: function(scope, element, attrs) {
   scope.eventField = element[0].innerText;
   element.attr('ng-bind', '$parent.' + attrs.initModel); // why do i have to use $parent here to make it work ?
   element.removeAttr('init-model');
   $compile(element)(scope);
  }
 };

});
<!-- clientside html -->
<input type="text" ng-model="event.time">
<div compile="htmlReceived">

</div>

<!-- html coming from server -->
<div init-model="event.time">
 10:30 AM
</div>

Я хочу привязать к родительской области видимости var event.time из директивы initModel, но она работает только тогда, когда я использую $parent для ссылки на переменную в родительской области видимости. Могу ли я добиться этой привязки без использования $parent?

Источник

1 ответ

Нет необходимости реализовывать эту директиву с изолированной областью действия. Просто используйте $parse оказание услуг:

angular.module("app",[])
.directive('initModel', function($parse) {
    return {
        restrict: 'A',
        //scope: {
        // eventField: '=initModel'
        //},
        link: function(scope, elem, attrs) {
            var setter = $parse(attrs.initModel).assign;
            setter(scope, elem.text().trim());
            scope.$watch(attrs.initModel, function(value) {
                elem.text(value);
            });
        }        
     };
})
<script src="//unpkg.com/angular/angular.js"></script>

<body ng-app="app" ng-init="event={}">
    <input type="text" ng-model="event.time">
    <div init-model="event.time">
        10:30 AM
    </div>
</body>

Для получения дополнительной информации см. AngularJS $ Parse Service API Reference.

Источник
Другие вопросы по тегам