Can I target a specific view

54 views
Skip to first unread message

mark goldin

unread,
Sep 20, 2014, 3:43:00 PM9/20/14
to ang...@googlegroups.com
Here is my basic layout.

------------------------------
main menu
-----------------------------
------------------------------

static view

------------------------------

------------------------------

dynamic view

------------------------------

When a page a loaded I only see a main menu. That is done without Angular. After selecting an item on the menu I need to show two views at the same time: a static view and a first dynamic view.
After clicking a button on the static view another dynamic view needs to replace a first dynamic view.

What is a main concept of creating such layout? Any code sample?

Thanks

dinesh kumar

unread,
Sep 21, 2014, 1:13:39 AM9/21/14
to ang...@googlegroups.com
Use angularui router-https://github.com/angular-ui/ui-router or use the combination of ng-include and ng-view.

Dinesh kumar l

mark goldin

unread,
Sep 21, 2014, 8:43:25 AM9/21/14
to ang...@googlegroups.com
Yes, ui-router is what to use, but beyond that I am sure I know which particular concept to follow to. Can you be a bit more specific?

Jens Melgaard

unread,
Sep 21, 2014, 12:43:31 PM9/21/14
to ang...@googlegroups.com
Another alternative is https://github.com/dotJEM/angular-routing where explicit viev targeting is more logical (IMO)...

Anyways, in both cases your looking for the concept of child-states or sub-states... Almost done in the same way in both frameworks.

Look at the "Sub State Example" at http://dotjem.github.io/angular-routing/
And one for UI-Router: http://plnkr.co/edit/u18KQc?p=preview

mark goldin

unread,
Sep 21, 2014, 3:34:11 PM9/21/14
to ang...@googlegroups.com
I will some time to look into all these example. Here is what I have so far:

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('first', {
        params:['partialURL', 'controller'],
        views: {
          upper: {
          templateUrl: 'app/views/eventDetailFilters.html',
          controller: 'eventDetailFiltersController'
          },
          lower: {
            templateUrl: function ($stateParams){
   return 'app/views/' + $stateParams.partialURL + '.html';
},
controller : function ($stateParams) {
              return $stateParams.controller;
        },
          }
        }
      })
  });

<body> 
    <ul>
        <li><a>Home</a></li>
        <li><a>Asset Status</a></li>
        <li><a>Alarms</a></li>
        <li><a>Annunciator panel</a></li>
        <li><a>Reports</a>
            <ul>
               <li><div><a ng-click="go('first', 'eventDetailFields', 'eventDetailFieldsService')">Reports</a><div></li>
            </ul>
        </li>
    </ul>
    <div style="height:8px">
        &nbsp;
    </div>
    <div ui-view="upper"></div>
    <div style="height:8px">
        &nbsp;
    </div>
    <div ui-view="lower"></div>
</body>

app.controller('eventDetailStateController', function($scope, $state) {
    $scope.go = function (first, partialURL, controller) {
      $state.go(first, { partialURL : partialURL, controller : controller });
    }  
});

When a menu is clicked, two views will be shown. Then when I click on a button on the upper view:
<button style="border-radius:5px" align="center" ng-click="runRefreshReport()">Generate Report</button>
it will go into a controller and run this:
$scope.go('lower@first', 'eventDetailReport', 'eventDetailReportController');
but nothing happens. Is there a way of making this working? Or it's not a way at all?

Thanks


--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/8kEZQm8Bxh0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply all
Reply to author
Forward
0 new messages