Menu
I am having a directive called templates, the code for templates is like below.
var templates = function($compile,$parse){
var directive = {
restrict: 'EA',
replace: true,
link: link
};
return directive;
function link(scope, element, attrs) {
scope.name = "testName";
var isHtmlCompiled = false;
}
};
angular.module('templateModules', [])
.directive('templates', templates);
This is mainly used for compiling html code and displaying it.But for the better understanding of the question I am not using it for that purpose in the example. The app.js file is like below
angular.module('ui.bootstrap.demo', ['ui.bootstrap','templateModules']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.groups = [
{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
},
{
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2'
}
];
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function() {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
$scope.add = function(){
alert($scope.name);
}
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
The index.html is using an accordion like below.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
<script src="app.js"></script>
<script src="template.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="AccordionDemoCtrl">
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
</accordion>
<accordion close-others="oneAtATime">
<accordion-group heading="DYnamic" is-open="status.open" is-disabled="status.isFirstDisabled">
<div templates="something"></div>
<button ng-click="add()">Add</button>
</accordion-group>
</accordion>
</div>
</body>
</html>
The problem I am facing is that I am not able to get the value of scope.name from template in the AccordionDemoCtrl. Is there any way to get that value in the AccordionDemoCtrl ?
456
You should be able to access the name property from AccordionDemoCtrl. Because your directive has scope: false and set scope.name in the link function, just like the simplified demo here: JSFiddle.
Here is a working demo modified from your example: Plunker (using two-way binding).
Explanations
The directive accordion doesn't define scope, so its scope is the one from outside controller. transclude:true makes Angular create a child scope for directive template. But since the name on outside controller is a primitive type, setting the value inside template will create a new name on the child scope. See the working demo: JSFiddle. The illustration:
If use an object instead of a primitive, it is working (JSFiddle).
For more details: Understanding Scopes
It seems better to use two-way binding to communicate between directive and outside controller.
Here is a working demo: Plunker
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
