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.
source to share
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 / ... .
source to share
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.
source to share