jsPlumb не перерисовывается после изменения вида в angular.js?

Я сделал две страницы, используя angularjs ngRoute. На первой странице я показываю два связанных объекта jsPlumb. Вторая страница не содержит объекта Plumb. Однако, когда я перехожу с первой страницы на вторую, объекты отвеса не исчезают. Знаете ли вы, как добиться правильного jsPlumb обновления с помощью ng-view обновления?

http://plnkr.co/edit/8592E9BnuwVXuKAJ5Pdx?p=preview

script.js

var app;
app = angular.module('ironcoderApp', [
    'ngRoute',
    'appControllers'
]);

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/page1', {
        templateUrl: 'page1.html',
        controller: 'Page1Controller'
      }).
      when('/page2', {
        templateUrl: 'page2.html',
        controller: 'Page1Controller'
      }).
      otherwise({
        redirectTo: '/page1'
      });
  }]);

var appControllers = angular.module('appControllers', []);

app.controller('Page1Controller', ['$scope', '$rootScope', '$routeParams', '$location', '$timeout',

function($scope, $rootScope, $routeParams, $location, $timeout) {
  $scope.text = 'page1';

  $timeout(function(){
    jsPlumb.connect({'source': $("#page1el1"), 'target': $("#page1el2"), 'label': 'te'});
  }, 0);
}
]);

app.controller('Page2Controller', ['$scope', '$rootScope', '$routeParams', '$location',

function($scope, $rootScope, $routeParams, $location) {
  $scope.text = 'page2';
}
]);

app.controller('MainController', ['$scope', '$rootScope', '$location',
function($scope, $rootScope, $location) {
  $scope.text = 'main';
}
]);

страница.html:

    <script type="text/ng-template" id="page1.html">

        <div id="page1el1" style="border: 1px red solid; width: 60px;">page1el1</div>
        <br>
        <div id="page1el2" style="border: 1px red solid; width: 60px;">page1el2</div>
        <br>
        page1

        <a href="#/page2">go to page2</a>

    </script>

    <script type="text/ng-template" id="page2.html">

        <br><br><br><br><br><br><br>
        <div id="page2el1" style="border: 1px green solid; width: 60px;">page2el1</div>
        <br>
        <div id="page2el2" style="border: 1px green solid; width: 60px;">page2el2</div>
        <br>

        page2

        <a href="#/page1">go to page1</a>
    </script>


    <div ng-view >

    </div>

javascript angularjs jsplumb ngroute ng-view
person Yuri Kriachko    schedule 28.02.2015    source источник
comment
У меня похожая проблема, когда я использую ui-router, jsplumb.connect() не работает после смены вида, как вы решили свою?   -  person RANDRIAMILASOA Stanislas    schedule 19.07.2017

Ответы (2)


arrow_upward
2
arrow_downward

  1. В вашем коде опечатка.
    Когда маршрут /page2, контроллер должен быть Page2Controller, а не Page1Controller
  2. Мы должны вручную отключить jsPlumb при переходе на страницу page2.

function($scope, $rootScope, $routeParams, $location, $timeout) {

$scope.$on('$destroy', function () {
    jsPlumb.detachAllConnections( $("#page1el2"))
});

$timeout(function(){
    jsPlumb.connect({'source': $("#page1el1"), 'target': $("#page1el2"), 'label': 'te'});
}, 0);
});

Вот обновленный плункер: http://plnkr.co/edit/mtjamVFRpjphpYE0Yqub?p=preview

person Vinay K    schedule 28.02.2015

arrow_upward
0
arrow_downward

Я обнаружил, что функция jsPlumb.ready() не работает при использовании с угловым кодом внутри ngView. Что сработало для меня, так это поместить весь готовый код события в угловой $viewContentLoaded

 $scope.$on('$viewContentLoaded', function (event) { 

    // All the ready code goes here.
}
person Pratik    schedule 09.06.2015