jsPlumb is not redrawn after view change in angular.js? - javascript

I made a two pages using angularjs ngRoute. On first page I show two connected jsPlumb objects.
Second page does not contain an Plumb object. However, when I go from first page to second Plumb objects does not disappear. Do you know how to achieve proper jsPlumb refresh with ng-view update?
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';
}
]);
page.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
go to page2
</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
go to page1
</script>
<div ng-view >
</div>

There is a typo in your code.
When the route is /page2, the controller should be Page2Controller not Page1Controller
We have to manually disconnect the jsPlumb on navigating to 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);
});
Here is the updated plunker: http://plnkr.co/edit/mtjamVFRpjphpYE0Yqub?p=preview

I found that the jsPlumb.ready() function does not work when used with angular code inside ngView.
What worked for me was to place all the ready event code in the angular $viewContentLoaded
$scope.$on('$viewContentLoaded', function (event) {
// All the ready code goes here.
}

Related

Dynamic loading Angular Controller

I am trying to load controllers dynamically using ocLazyLoad :
$ocLazyLoad.load('./ctrls/login.js');
But am getting this error saying:
The controller with the name 'loginCtrl' is not registered.
angular.module('optimusApp')
.controller('loginCtrl', function ($scope, $rootScope, $location, $http) {});
app.js
angular.module("optimusApp", ['ngRoute', 'oc.lazyLoad']);
angular.module('optimusApp')
.controller('globalCtrl', function ($rootScope, $location, $http, $routeParams, $ocLazyLoad) {
$ocLazyLoad.load('./ctrls/login.js');
});
I made it work by using ng-if
app.js
var optimusApp = angular.module("optimusApp", ["ngRoute", "oc.lazyLoad"])
.controller("globalCtrl", function ($rootScope, $location, $http, $routeParams, $ocLazyLoad) {
$ocLazyLoad.load("./js/app/login.js").then(function() {
console.log("loginCtrl loaded");
$rootScope.loginActive = true;
}, function(e) {
console.log("error");
});
});
login.js
optimusApp.controller('loginCtrl', function ($scope, $rootScope, $location, $http) {
});
HTML
<div ng-if="loginActive" ng-controller="loginCtrl">
</div>
Basically you will get the "registration error" if your ng-controller is in the page before you have the JS loaded.
So the ng-if is a solution, or I see you have ngRoute. So you could set ocLazyLoad to load the controller when entering a specific state.

AngularJS Routing to different page with different controller

I have two HTML pages. One is the exam.html and other is result.html. On certain condition in the controller ExamCtrl of exam.html, I route to result.html using $location.path. But however, on the result page, the controller ResultCtrl doesn't seem to load though I have added it in the config file.
angular config file:
angular.module('exam').config(['$stateProvider',
function ($stateProvider) {
// Exam state routing
$stateProvider
.state('exam', {
abstract: true,
url: '/exam',
template: '<ui-view/>'
})
.state('exam.list', {
url: '',
templateUrl: 'modules/exam/client/views/exam.client.view.html',
controller: 'ExamCtrl'
})
.state('/result', {
url: '/result',
templateUrl: 'modules/exam/client/views/exam-result.client.view.html',
contoller: 'ResultCtrl'
});
}
]);
ExamCtrl:
angular
.module('exam')
.controller('ExamCtrl', ['$scope', '$stateParams', '$location', 'Authentication', '$http',
function ($scope, $stateParams, $location, Authentication, $http) {
$scope.submitAnswer = function (selected) {
//some code
if (qtnCounter > 5) {
// loads the result page.
$location.path('/result');
} else {
$scope.getQues();
}
};
}
]);
ResultCtrl:
angular
.module('exam')
.controller('ResultCtrl', ['$scope', '$stateParams', '$location', 'Authentication', '$http',
function ($scope, $stateParams, $location, Authentication, $http) {
console.log('ResultCtrl');
}
]);
result.html:
<body ng-controller="ResultCtrl">
<h1>Result page!</h1>
</body>
Insted of using $location use the $state to change to a given state in your app.
Inject the $state in the controller and then call the transitionTo() which will load the view and setup the controller
angular
.module('exam')
.controller('ExamCtrl', ['$scope', '$state', 'Authentication', '$http',
function ($scope, $state, Authentication, $http) {
$scope.submitAnswer = function (selected) {
//some code
if (qtnCounter > 5) {
// loads the result page.
$state.transitionTo('/result');
} else {
$scope.getQues();
}
};
}
]);

How to use angularJS $routeProvider and $routeParams

I am building my first angularJS app and I am struggling with getting parameters from my URL into my code.
The URL has a single parameter, subject and all I am trying to do at this stage is display it on the screen...
Javascript:
app.config(function($routeProvider) {
$routeProvider
.when('/setspage/:subject',
{templateUrl: "setspage.html",
controller: "setsController"
}),
});
angular.module("app").controller("setsController", function($scope, $routeParams, $http) {
$scope.selectedSubject = routeParams.subject
});
HTML:
<body ng-controller="setsController">
<div class="page-header">
<h1>Subject : {{selectedSubject}}</h1>
</div>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
</body>
change
routeParams.subject
to
$routeParams.subject
Change your controller like this
angular.module("app").controller("setsController",['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
$scope.selectedSubject = $routeParams.subject
}]);

$modal.open is not working

I want to show a progress dialog as a model by using ui.bootstrap, so I included it as a dependency in my application as follows:
var app = angular.module('app', ['ngRoute','ngCookies','home','ui.bootstrap']);
After injecting it my controller is as follows:
angular.module('home', [])
.controller('homeCtrl', ['$scope', '$http', '$filter', '$route', '$routeParams', '$location', '$rootScope', 'showAlertSrvc', '$modal',
function ($scope, $http, $filter, $route, $routeParams, $location, $rootScope, showAlertSrvc, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'App/Register',
controller: 'registerCtrl',
//size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
//modalInstance.result.then(function (selectedItem) {
// $scope.selected = selectedItem;
//}, function () {
// //$log.info('Modal dismissed at: ' + new Date());
//});
};
}]);
And my HTML is :
<input type="submit" value="Show Model" class=" novalidate form-control" ng-click="open()" style="background-color:skyblue; height: 45px" />
My View is named as Register.cshtml residing in App directory. Also routing is active at this URL. But when I click the button nothing happens, I wonder if templateUrl expects URL in any other format here. Please suggest what am I missing here.
Try to specify the path to the template with extersions
templateUrl: 'App/Register.cshtml',
Other options for .open look fine.

AngularJS templating and making it faster?

I want to use AngularJS in combination with Django to make single-page application. In general, I have index page (search) and details page with more sub-pages.
And that makes a problem. I have one controller (for details and it is getting info about object which is chosen) and other controllers user that main controller using $controller function.
It looks like:
.controller('BuildingDetailsCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location',
function($scope, $routeParams, buildingsRepository, $location) {
$scope.details = null;
$scope.menu = templatesFolder + "buildings/menus/";
$scope.currentUrl = $location.url();
$scope.loading = true;
buildingsRepository.getDetails($routeParams.slug).then(function(res) {
$scope.details = res.data[0];
$scope.loading = false;
});
$scope.alert = {"type": null, "message": null};
}])
.controller('SecondCtrl', ['$scope', '$routeParams', 'buildingsRepository', '$location', '$controller',
function($scope, $routeParams, buildingsRepository, $location, $controller) {
$controller('BuildingDetailsCtrl', {$scope: $scope, $routeParams: $routeParams, buildingsRepository: buildingsRepository, $location: $location})
$scope.partial = templatesFolder + "buildings/details/info.html";
}])
and my urls:
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: templatesFolder + "buildings/index.html", controller: 'UserBuildingsCtrl'});
$routeProvider.when('/details/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingInfoCtrl'});
$routeProvider.when('/test/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'SecondCtrl'});
$routeProvider.when('/contact/:slug', {templateUrl: templatesFolder + "buildings/details.html", controller: 'BuildingContactCtrl'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
On that details.htmlpage, I have one menu, but problem is loading, and everytime I change from, for example, InfoCtrl to SecondCtrl, my menu is being refreshed and I can see that (less than half second). It is irritating.
Is there any way to prevent loading of those templates, to load just partial, but with changing URL (I need it to be accessed from copied url etc)?
You can embed your template in the already-rendered page as a script of type text/ng-template:
<script type="text/ng-template" id="details.html">
<p>hello world</p>
</script>
Here is a plunk.
You should not need to call $controller() in your controller. You angular app will instance the controller needed by including a directive in your html like this:
<div ng-controller="BuildingDetailsCtrl">
...
</div>

Categories

Resources