注入されたjquery、角度コードが常に機能しない

Question

ウェブページにスクリプトを挿入し、リストビューからグリッドビューに変更できる単純なリストを表示します。それは次のようになります。私はボタンをクリックし

「NEXT」私は、角状態とantoher HTMLへの表示の変更を変更します。そのほかのHTMLファイルでは、私は戻って、このリストテンプレートに状態を変更ボタン「BACK」を持っているが、私は戻るボタンをクリックした後、私は最初のテンプレートに移動し、ビューは次のようになります。

また、リストからグリッドへのボタンの変更はもう動作しません...

私はこの質問に自分のコードを貼り付けるべきかどうかわかりません。しかし、これは角張った、まあまあまあの問題ですか？その他の機能は正常に動作します「全てをチェック」または「スクロール」

UPDATE 私はGoogle Chrome拡張機能を作成していますし、リスト/グリッドビューを作成するために、私はMixItUpライブラリ

をこれは私のリストコントローラされて使用していますその写真の中のビューを制御します。

angular.module('app').controller('ListController', ListController); 

ListController.$inject = ['$scope', '$http', '$location', '$state']; 

function ListController($scope, $http, $location, $state) { 

    var $frame = $('#smart'); 
    var $wrap = $frame.parent(); 
    var layout = 'list', 
     $container = $('#ContainerSelect'), 
     $changeLayouttoList = $('#toLongListSelect'), 
     $changeLayoutToGrid = $('#toGridViewSelect'); 

    // Call Sly on frame 
    $frame.sly({ 
     itemNav: 'basic', 
     smart: 1, 
     mouseDragging: 1, 
     touchDragging: 1, 
     releaseSwing: 1, 
     startAt: 1, 
     scrollBar: $wrap.find('.scrollbar'), 
     scrollBy: 1, 
     speed: 300, 
     elasticBounds: 1, 
     easing: 'easeOutExpo', 
     dragHandle: 1, 
     dynamicHandle: 1, 
     clickBar: 1 
    }); 

    $container.mixItUp({ 
     animation: { 
      animateChangeLayout: true, 
      animateResizeTargets: true, 
      effects: 'fade rotateX(-40deg) translateZ(-100px)' 
     }, 
     layout: { 
      containerClass: 'list' 
     } 
    }); 

    // assign function to onclick property of checkbox 
    document.getElementById('checkbox_field').onclick = function() { 
     // access properties using this keyword 
     if (this.checked) { 
      $(".selectProductCB").prop('checked', $(this).prop("checked")); 
      $(".checkbox_txt").text("Uncheck all"); 
     } else { 
      $(".selectProductCB").prop('checked', $(this).prop("checked")); 
      $(".checkbox_txt").text("Check all"); 
     } 
    }; 

    $scope.next = function() { 
     $state.go("selectNotifier", {}, { location: false }); 
    }; 

    $scope.toLongList = function() { 
     layout = 'list'; 
     $container.mixItUp('changeLayout', { 
      containerClass: layout 
     }); 
    }; 

    $scope.toGridView = function() { 
     layout = 'grid'; 
     $container.mixItUp('changeLayout', { 
      containerClass: layout 
     }); 
    }; 
}; 

これは、戻るボタンを持っているNotifycontrollerです：

angular.module('app').controller('NotifyController', NotifyController); 

NotifyController.$inject = ['$scope', '$http', '$location', '$state']; 

function NotifyController($scope, $http, $location, $state) { 
    $scope.back = function() { 
     $state.go("selectList", {}, { location: false }); 
    }; 
    $scope.watchIt = function() { 
     $state.go("target", {}, { location: false }); 
    } 
}; 

私は状態を経てジャンプしています。この機能では

：デフォルト角度によって

$scope.close = function() { 
    $state.go("selectList", {}, { location: false }); 
}; 

Answer 1

が提供する/状態が持続します。それを保存する必要はありません。戻るボタンをクリックすると、リスト/グリッドビューのフラグ/変数に問題があります。