How to use parent scope for only some variables in angular and keep other variables isolated
mydirective is an isolated scope directive. This is because I don't want to expose all the logic of the directive anywhere outside the directive. But I want to access the input data outside of the directive.
<div mydirective>
<input ng-model="data.input">
</div>
<div mydirective>
<input ng-model="otherdata.public">
<input ng-model="more.than.one">
</div>
{{data.input}}
{{otherdata.public}}
I prefer the HTML to work without changing it, and change ONLY the directive code. So I want to know how to create the directive
app.directive('mydirective',function(){ return {
scope:true,
controller:function($scope){
$scope.this_variable_needs_to_be_private=true
},
transclude:true
}})
EDIT: add transclude: true. But I have no answer to this question.
Consider using the $ transclude function along with creating your own childScope with $scope.$new()
:
(function() {
"use strict";
angular.module("myApp", [])
.controller("Controller1", ['$scope', Controller1])
.directive("mydirective", [mydirective]);
function Controller1($scope) {
$scope.data = {
input: 'data.input'
};
$scope.otherdata = {
public: 'otherdata.public'
};
$scope.more = {
than: {
one: 'more.than.one'
}
}
}
function mydirective() {
function _link($scope, $element, $attrs, controller, $transclude) {
var childScope = $scope.$new(); //create a childScope
//$scope.this_variable_needs_to_be_private = true; //<-- doing this would add it to public parent scope
childScope.this_variable_needs_to_be_private = true; //<-- this puts it only on this directive childscope
// See: https://docs.angularjs.org/api/ng/service/$compile#transclusion
$transclude(childScope, function(clone, scope) { //transcluding with our childScope
$element.append(clone); //appending the clone of our content;
});
}
return {
transclude: true,
link: _link
};
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Controller1">
<div mydirective>
<input ng-model="data.input">
<br /><strong>this_variable_needs_to_be_private:</strong> {{this_variable_needs_to_be_private}}
</div>
<br />
<div mydirective>
<input ng-model="otherdata.public">
<input ng-model="more.than.one">
<br /><strong>this_variable_needs_to_be_private:</strong> {{this_variable_needs_to_be_private}}
</div>
<hr />
<strong>data.input:</strong> {{data.input}}
<br /><strong>otherdata.public:</strong> {{otherdata.public}}
<br /><strong>this_variable_needs_to_be_private:</strong> {{this_variable_needs_to_be_private}}
</div>
Further Reading on $transclude
: fooobar.com/questions/14824 / ... .
To access the variables of a directive's allocated scope, you can use one-way or two-way data bindings as shown below:
app.directive('mydirective',function(){ return {
scope:{var1:"=outerVar"},
controller:function($scope){
$scope.var1='I am accessible outside...';
}
}})
The variables of the child object won't show up anyway in the parent. You need to use the parent scope variables in the isolated scope to communicate between them.