Manol Posted November 27, 2014 Posted November 27, 2014 This is the way I use to integrate both worlds together. 1.- _header.php ( or whatever is called the file that contains your <body> tag ) <head> ... <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script>var app = angular.module('myApp', [])</script> </head> <body ng-app="myApp"> ... 2.- yourTemplate.php <script> app.controller('myCtrl', function ($scope) { $scope.myvar = []; $scope.myvar = <?=getChildren("template=yourtemplatename")?>; console.debug("my Object form php",$scope.myvar); }); </script> <!-- now $scope.myvar is accesible --> <div ng-controller="myCtrl"> </div> 3.- getChildren is a function that I include in _func.php function getChildren($pageId) { $pagina = wire('pages')->get($pageId); // fields to be avoided $avoid = array("FieldtypeFieldsetOpen", "FieldtypeFieldsetClose","FieldtypeFieldsetTabOpen","FieldtypeFieldsetTabClose"); // fields that must be returned $wanted = $fields; // selector $paginas = $pagina->find($selector); $arr = array(); foreach ($paginas as $child) { $array = array(); foreach($child->fields as $field) { $array['id'] = $child->id; // if we dont' want all fields back if ( !in_array($field->type, $avoid) && in_array($field->name, $wanted) && (count($wanted)>0) ) { $array[$field->name] = htmlspecialchars($child->get($field->name)); } // we want all fields back if ( !in_array($field->type, $avoid) && (count($wanted)==0) ) { $array[$field->name] = htmlspecialchars($child->get($field->name)); } } array_push($arr, $array); } echo json_encode($arr); } 11
Manol Posted November 29, 2014 Author Posted November 29, 2014 If you install this module you´ll be able to use angular and use it in your templates directly. Example of a list of all children of the actual page. <script> app.controller('myCtrl', function ($scope) { $scope.children = []; $scope.children = <?=$page->getChildren()?>; }); </script> <div ng-controller="myCtrl"> <ul> <li ng-repeat="child in children">{{child.title}}</li> </ul> </div> 10
Manol Posted December 1, 2014 Author Posted December 1, 2014 Module updated 1.- Added methods $page->getChildren() $page->getPage() 2.- Now you can inject scripts trough module configuration 7
Manol Posted December 2, 2014 Author Posted December 2, 2014 New methods: $page->getPage() $page->getPage(1015) $page->getChildren() $page->getChildren(2024) $page->getChildren('template=products') 4
Peter Posted November 12, 2015 Posted November 12, 2015 Hi Manol, How can I access the page url using your module? I am bulding an Intranet solution and I want to use Angular on in the table views of projects, clients etc. and then link to a detail page for a specifc project, client etc. Also, JSON returns id as integer but every other field as string. How can I use/(convert?) a specific field as integer? Thanks for the module. Peter PS. To get the module installed I had to add an is_array check in the getChildren function of your module. EDIT: I used this module for the urls: ProcessRedirectIds
Peter Posted November 12, 2015 Posted November 12, 2015 I need project.project_progress to output as integer for the progress bar: <script> app.controller('projects', function ($scope) { $scope.projects = []; $scope.projects = <?=$page->getChildren('template=project')?>; $scope.sortType = 'title'; $scope.sortReverse = false; $scope.searchProject = ''; }); </script> ... <tbody> <tr ng-repeat="project in projects | orderBy:sortType:sortReverse | filter:searchProject"> <td><strong>{{project.title}}</strong></td> <td>{{project.project_start_date}}</td> <td>{{project.project_due_date}}</td> <td> <div class='progress-bar-indication'> <span class='meter' style='width: {{project.project_progress}}%'> <p>{{project.project_progress}}%</p> </span> </div> </td> <td><a href="{{project.id}}"><i class="fa fa-eye"></i></a></td> </tr> </tbody>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now