Basically, impress needs to offer a way to init, cleanup, re-init, or
hide/show. That can be done in the directive if impress exposes some
methods to handle special cases.
Otherwise, you might need to remove the view from routeProvider and just
use ng-show /ng-hide in the index.html (main template) when that link is
clicked which doesn't remove the DOM only sets display:none. That way the
directive inits impress once and the click just hides or shows it... just
be sure the html housing the impress DOM is not removed by a view change.
//index.html
<a ng-click="showImpress=true">Impress Link</a>
<div ng-show="showImpress">
<div id="impress" class="impress-not-supported" name="impress">
<div ng-repeat="demo in demos" class="step top stepCSS"
data-x="{{(($index + 1) * 1000) + 1000}}" data-y="{{(($index + 1) * -1500)
- 1500}}" data-z="{{(($index + 1) * 2000) + 2000}}" data-rotate="180"
data-scale="3" initiate-impress="">
<h1>{{demo.name}}</h1>
<div class="number">
<img src="{{demo.logo}}" />
</div>
</div>
</div>
<div ng-hide="showImpress">
//route views
<div ng-view></div>
</div>
If you still need the url in the address to reflect the change, there are
ways to get it done.
On Wed, Feb 12, 2014 at 10:37 AM, Zach Schneider <[email protected]> wrote:
> I tried that first actually. The problem is impress writes everything to a
> canvas tag and loads each class as a child value. Once you leave the view
> and return angular still has the rendered impress elements inside the DOM,
> so impress throws out an error since the child values already exist. So
> even when i'm completely reloading the view and having the impress
> reference inside the view it still throws out an error. That lead me to
> believe that angular isn't actually removing the DOM manipulation Impress
> does after intial render when reloading a controller/view.
>
> window.location.refresh() does fix this, but that reloads the entire
> application and not just the view i'm trying to re-render. My hope is that
> angular has something like $setPristine() that can be used for DOM
> elements instead of forms.
>
>
> On Wednesday, February 12, 2014 10:59:56 AM UTC-6, Luke Kende wrote:
>
>> So, the main thing I can see here is that the DOM to which you are
>> applying impress to gets removed completely on a view change, so impress's
>> references would be void after leaving the view and returning.
>>
>> What about putting <script> reference to impress sources in the view
>> template itself instead of the <head> of the page? That way it gets
>> removed and loaded each time the view changes along with the template. Then
>> instead of emitting an event, just call impress.init() within the
>> directive's linking function? (impress.init() can be called in the
>> directive just as easily as in the controller since it's on the global
>> window object)
>>
>> Obviously, you'd have to test it out to see if it's feasible, but
>> offering alternatives for you to consider.
>>
>>
>> On Wed, Feb 12, 2014 at 9:15 AM, Zach Schneider <[email protected]>wrote:
>>
>>> Yep, I've only spent a few days on Angular and i'm working on modifying
>>> code someone else wrote.
>>>
>>> The code is written on a platform that required a lot of hacking to get
>>> to work, so i'm not sure how i'd even start making a plunker from it. I
>>> can show you my controller and the route provider though:
>>>
>>> Routeprovider:
>>> ngModMain.config(['$routeProvider',
>>> function($routeProvider, $rootScope, $scope) {
>>> $routeProvider
>>> .when('/home', {
>>> templateUrl: 'demoDashboard.html',
>>> controller: 'demoDashboardCtrl'
>>> })
>>>
>>> .when('/home/wall', {
>>> templateUrl: 'demoDashboard.html',
>>> controller: 'demoDashboardCtrl'
>>> })
>>> .when('/home/default', {
>>> redirectTo: '/home'
>>> })
>>>
>>>
>>> //This is the one i want to have refresh as if the template
>>> had never been rendered before
>>> .when('/expo', {
>>> templateUrl: 'expo.html',
>>> controller: 'atcExpoCtrl'
>>>
>>>
>>>
>>> .otherwise({
>>> redirectTo: '/home'
>>> });
>>>
>>> }
>>> ]);
>>>
>>>
>>> Controller:
>>>
>>> var ATCExpo = angular.module('ATCExpo', [])
>>>
>>>
>>> //This directive broadcasts when the last ng-repeat is run for building
>>> out the impress.js slides.
>>> .directive('initiateImpress', function($timeout, $rootScope){return {
>>> restrict: 'A',
>>> link: function (scope, element, attr) {
>>> if (scope.$last === true) {
>>> $timeout(function () {
>>> scope.$emit('ngRepeatFinished');
>>> });
>>> }
>>> }
>>> };
>>> });
>>>
>>> ATCExpo.controller('atcExpoCtrl', function($scope, $timeout, $route,
>>> $rootScope, $location, $window){
>>>
>>> //This is the logic i'm currently using to refresh the page. I
>>> feel there should be a way to do this by refreshing the template/controller
>>> and not the entire window.
>>> if(!angular.isDefined($rootScope.loadCount)){
>>> $rootScope.loadCount = 0;
>>> }else{
>>> $rootScope.loadCount++;
>>> }
>>> if($rootScope.loadCount == 1){
>>> $location.refresh();
>>>
>>> // this failed to work.
>>> //$route.reload();
>>> }
>>> //Event Listener for ng-repeat on Demo impress cards.This is needed
>>> because impress tries to render the cards while ng-repeat is still
>>> populating the attributes in the template.
>>> $scope.$on('ngRepeatFinished', function() {
>>> //if($scope.loadCount ===0){
>>> impress().init();
>>> //}
>>> });
>>> });
>>>
>>>
>>> Template:
>>>
>>> // the demo value here is from another script, it currently works
>>> without issue.
>>> <div id="impress" class="impress-not-supported" name="impress">
>>> <div ng-repeat="demo in demos" class="step top stepCSS"
>>> data-x="{{(($index + 1) * 1000) + 1000}}" data-y="{{(($index + 1) * -1500)
>>> - 1500}}" data-z="{{(($index + 1) * 2000) + 2000}}" data-rotate="180"
>>> data-scale="3" initiate-impress="">
>>> <h1>{{demo.name}}</h1>
>>> <div class="number">
>>> <img src="{{demo.logo}}" />
>>> </div>
>>> </div>
>>>
>>> On Wednesday, February 12, 2014 12:17:22 AM UTC-6, Luke Kende wrote:
>>>>
>>>> I don't have enough information to adequately answer your question, but
>>>> my best guess is that you are new to angular?
>>>>
>>>> Are you using routeProvider for your views? If so the views reload the
>>>> associated controller, so could not your call impress.init() be there?
>>>>
>>>> Can you create a plunker or similar to demonstrate?
>>>>
>>>> On Tuesday, February 11, 2014 5:04:13 PM UTC-7, Zach Schneider wrote:
>>>>>
>>>>> I have an angular application that i'm trying to use impress.js inside
>>>>> of.
>>>>>
>>>>> I've been able to overcome the issue with url hash conflicts, the only
>>>>> issue I have is with initiating the impress.js.
>>>>>
>>>>> The impress page is a link at the top of the navigation. I want to be
>>>>> able to move from that page to another page and back without issue.
>>>>> However, the way impress.js works you can only run impress().init() one
>>>>> time, so once I click away from the impress page and navigate back to it
>>>>> impress.js stops working.
>>>>>
>>>>> I've solved this issue with the following code:
>>>>>
>>>>> if(!angular.isDefined($rootScope.loadCount)){
>>>>> $rootScope.loadCount = 0;
>>>>> }else{
>>>>> $rootScope.loadCount++;
>>>>> }
>>>>> if($rootScope.loadCount == 1){
>>>>> $window.location.reload()
>>>>> }
>>>>>
>>>>> But I feel like there should be an easier way to do this. Is there a
>>>>> way to have visiting a page a second time re-render the view like you have
>>>>> not been to the page yet?
>>>>>
>>>> --
>>> 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/I1tTfbTg33s/unsubscribe.
>>> To unsubscribe from this group and all its topics, send an email to
>>> [email protected].
>>> To post to this group, send email to [email protected].
>>>
>>> Visit this group at http://groups.google.com/group/angular.
>>> For more options, visit https://groups.google.com/groups/opt_out.
>>>
>>
>> --
> 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/I1tTfbTg33s/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/groups/opt_out.
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
