How to bind to event.time variable in parent scope from a directive with isolate scope without using $parent in directive?

Question

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>

I want to bind to the parent scope var event.time from initModel directive but it only works when i use $parent to refer to the var in parent scope. Can i achieve this binding without using $parent ?

Try using controller as syntax

Shashank Vivek
– Shashank Vivek

2018-04-24 15:05:27 +00:00
Commented Apr 24, 2018 at 15:05 — Shashank Vivek
– Shashank Vivek, Commented Apr 24, 2018 at 15:05

georgeawg · Accepted Answer · 2018-04-24 18:21:13Z

0

There is no need to implement that directive with isolate scope. Simply use the $parse service:

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>

For more information, see AngularJS $parse Service API Reference.

answered Apr 24, 2018 at 18:21

georgeawg

49k13 gold badges77 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oomer Over a year ago

@ georgeawg, i am under the impression it is always better to access parent scope variables through isolate scope in a directive, and your solution seems to be compromising on that. doesn't it ? the scope you are using inside directive is the prototypically inherited scope from the parent, right ?

georgeawg Over a year ago

This is an attribute directive that creates no new scope, inherited or isolate. There are many core directives of AngularJS which avoid creating a scope: ng-class, ng-click, ng-show, etc. With attrubute directives it is wise to avoid the overhead of creating a scope which may conflict with other attribute directives.

Collectives™ on Stack Overflow

How to bind to event.time variable in parent scope from a directive with isolate scope without using $parent in directive?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related