Geek Answers Handbook

Angular accompaniment issue

I have a directive called templates, code for templates, as shown 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 to compile html code and display it. But for a better understanding of the issue, I do not use it for this purpose in this example. The app.js file looks 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 }; });

Index.html uses an accordion as shown 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.imtqy.com/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 cannot get the scope.name value from the template in AccordionDemoCtrl. Is there any way to get this value in AccordionDemoCtrl?

+5
source share
1 answer

You must have access to the name property of AccordionDemoCtrl . Since your directive has scope: false and sets scope.name to the link function, like a simplified demo here: JSFiddle .

The following is a working demo modified from your example: Plunker (using two-way binding).

Explanations

The accordion directive does not define scope , so its scope is an external controller. transclude:true makes Angular create a child region for the template directive. But since name on the external controller is a primitive type, setting the value inside the template will create a new name in the area of ​​the child objects. See a working demo: JSFiddle . Illustration:

enter image description here

If you use an object instead of a primitive, it works ( JSFiddle ).

For More Information: Understanding Areas

It seems better to use two-way binding for communication between the directive and the external controller.

Here is a working demo: Plunker

+2
source

More articles:


All Articles