Angular Views Issue - Angular 1.5 - $stateProvider issue???- UI Router - angularjs

I have a simple application which uses the $stateProvider to toggle between templates/views. I have two links:
Areas
Vendors*
I have the following handler in the controller:
var vm = $scope;
vm.manage = function (type) {
if (type == 'vendors') {
vm.message = 'Comming soon.';
} else {
$state.go(type);
}
};
When I click on the Areas link, I change the state to area (using the $state.go(...) call and then I see the template (and the html contents). Then, when I click the Vendors link I see the default message 'Comming soon'. Then when I click the Areas link again, I get the console.log from the area-controller but not the output (template and the html contents therein). What is going here, this is a very simple task that I do all the time and not sure why I'm not getting the static <h1></h1> the second time I request the $state change.
I have tried $scope.apply() and even $scope = $scope.new assuming somehow something in memory is clogged or something.
My module looks like this:
'use strict';
(function () {
angular.module('areaModule', []).config(areaModule);
areaModule.$inject = ['$stateProvider'];
function areaModule($stateProvider) {
$stateProvider
.state('area', {
url: '/area',
templateUrl: 'app/assetManagement-app/modules/area/area.tmpl.html',
controller: 'area-controller'
});
}
})();
and the controller looks like this
'use strict';
(function () {
angular.module('areaModule').controller('area-controller', areaController);
areaController.$inject = ['$scope', '$state', 'areaService'];
function areaController($scope, $state, areaService) {
var vm = $scope;
// clean up any memory leaks
$scope.$on('$destroy', function () { });
// init()
vm.init = function () {
console.log('area controller');
};
vm.init();
return vm;
}
}());
and the template is here
<div class="container" style="margin: 10px 5px 10px 5px;">
<h1>Area Management View</h1>
</div>
What's going on?

It is a clash between href and state.go. If you remove href in your html It is working as expected.

Related

When I used ng-include to load html dynamically, the controller of that html is not loaded

I have following scenario
assemblyHeader.js
$scope.AssemblyHeaderDetails = function () {
if {
mixpanelEventTrack('Quote Details Clicked');
var RFQDetailInstance = $modal.open({
templateUrl: 'Scripts/ng/View/QuoteDetailPopup.html',
windowClass: 'QuoteDetail',
controller: 'QuoteDetailPopupController',
resolve: {
AssemblyId: function () { return $scope.AssemblyInfo.assemblyid; },
parentScope: function () {
return $scope;
}
}
});
RFQDetailInstance.result.then(function (result) {
});
}
}
Following is my QuoteDetailPopup.html
<link href="Content/PageCss/requestFormView.css" rel="stylesheet" />
<div>
<div ng-include src="TemplateUrl" >
hello world!!!
</div>
</div>
Following is my controller for html QuoteDetailPopupController.js
(function () {
'use strict';
var controllerId = 'QuoteDetailPopupController';
angular.module('CalcQouteModule').controller(controllerId,
['$scope', 'DataConstants', '$filter', 'MessageConstant', '$modalInstance', 'parentScope', '$modal', 'urlConstant', '$timeout', QuoteDetailPopupController]);
function QuoteDetailPopupController($scope, DataConstants, $filter, MessageConstant, $modalInstance, parentScope, $modal, urlConstant, $timeout) {
$scope.TemplateUrl = 'Scripts/ng/View/requestFormView.html';
}
}());
The problem is when modal popup opens it renders HTML page but didn't render the controller of requestFormView.html so the controls on HTML are not loaded properly.
For requestFormView.html the controller name is requestFormController.js
Following popup is opened when I clicked.
How can I load controller?
Add controller file in index.html and in app.js when you hit the url mention controller name over there. Hope this will help you.

UI-Router 1.0.0-beta.3 ui-sref params child routes

Attempting to navigate to a child route of a parent route with a parameter. The ng-click does go off and I can see it in the console registering the click, but I get no changes to the state. Am I declaring the ui-sref wrong?
<body ng-controller="myController as $ctrl" style="{margin-top: 70px;}">
<div>
<button><a ui-sref="idLevel.index({something: 1})" ng-click="$ctrl.test()">Link1</a></button>
<button><a ui-sref="idLevel.other({something: 2})" ng-click="$ctrl.test2()">link2</a></button>
</div>
<ui-view>
<div>
test
</div>
</ui-view>
// Code goes here
function appRoute($stateProvider, $locationProvider) {
$locationProvider.html5Mode(false);
$stateProvider
.state('idLevel', {
url: '/:something',
abstract: true,
})
.state('idLevel.index', {
url: '/index/',
component: 'component1'
})
.state('idLevel.other', {
url: '/other/',
component: 'component2'
})
}
var component1 = {
template: '<h1>indexRoute</h1><br><p>HELP!!{{$ctrl.params}}</p>',
controller: function($stateParams) {
var ctrl = this;
console.log('component1', $stateParams);
ctrl.params = $stateParams.id;
}
};
var component2 = {
template: '<div><h1>otherRoute</h1><br><p>Help2 {{$ctrl.params}}</div>',
controller: function($stateParams) {
var ctrl = this;
console.log('component2', $stateParams);
ctrl.params = $stateParams.id;
}
};
function myController($stateParams) {
var ctrl = this;
ctrl.test = test;
ctrl.test2 = test2;
function test() {
console.log('TEST LINK!', $stateParams.id)
}
function test2() {
console.log('TEST 2', $stateParams.id)
}
}
angular.module('app', ['ui.bootstrap', 'ui.router'])
.config(appRoute)
.controller('myController', myController)
.component('component1', component1)
.component('component2', component2);
myController.$inject = ['$stateParams'];
appRoute.$inject = ['$stateProvider', '$locationProvider'];
component1.$inject = ['$stateParams'];
component2.$inject = ['$stateParams'];
Plnkr here
I feel like I'm missing something simple here, but I can't figure out why its not allowing me to hit the route.
A parent state needs to have a <ui-view> in it's template for child states to render in.
Note that in plunker you can't use / as base since the editor is not in the root of site
Updated plunker
firstly your plunkr looks a bit different to the code you've shown, secondly, from what I can see, the plunkr seems to be working - you are getting a state change - you cant see it because the content is hidden behind the title nav bar.
If you open the plunkr in the separate window (blue button) you can just see the content under the navbar changing as you click the links.

Cannot Access parent controller's method from the child UI

I have a popup form where it's having lot of tabs.
Its' like this :
index.js
vm.openCreateOrEditPropertyModal = function (resolveProperty) {
var modalInstance = $uibModal.open({
templateUrl: '~/App/tenant/views/propertymanagement/createOrEditPropertyModal.cshtml',
controller: 'tenant.views.propertymanagement.createOrEditPropertyModal as vm',
resolve: {
resolveProperty: function () {
return resolveProperty;
}
}
});
};
Tabs are like this :
createOrEditPropertyModal.cshtml
<uib-tabset class="tab-container tabbable-line" type="pills">
<uib-tab heading="#L("PropertyInformation")">
<div ng-include="'~/App/tenant/views/propertymanagement/tabs/propertyForm.cshtml'"></div>
</uib-tab>
</uib-tabset>
createOrEditPropertyModal.js
(function () {
appModule.controller("tenant.views.propertymanagement.createOrEditPropertyModal", [
"$scope", "resolveProperty", "localStorageService", "$uibModalInstance", function ($scope, resolveProperty, localStorageService, $uibModalInstance) {
var vm = this;
//to close the pop up
vm.cancel = function () {
$uibModalInstance.close();
};
}
]);
})();
propertyForm.cshtml
<div ng-controller="tenant.views.propertymanagement.tabs.propertyForm as vm">
<button type="button" ng-click="vm.cancel()">#L("Close")</button>
</div>
propertyForm.js
(function () {
appModule.controller("tenant.views.propertymanagement.propertyForm", [
"$scope", "resolveProperty", "localStorageService", function ($scope, resolveProperty, localStorageService) {
var vm = this;
}
]);
})();
Above set up is working fine.Now I need to access cancel() method on the createOrEditPropertyModal.js file from the child form (i.e. propertyForm.cshtml).But it's not being fired.Can you tell me how to do that ? I have tried like this ng-click="$parent.cancel()".But it's not working.
You can do vm.cancel() directly inside a child form as you are already using controllerAs pattern. But in your case you have both controller alias as vm it is referring to current child controller context. Changing name of either of controller alias would make it working.
Best way to solve this issue would change your controller alias to different name. Controller aaliases should be like by looking at their name's you can pretend which controller it is.
--
The ng-click isn't working because cancel method isn't there inside $parent scope. You should be doing $parent.vm.cancel(). But I'd not prefer you to use $parent on view, because bad practice.
I can think of three possible solutions:
It's because the cancel function is not on the $parent scope, but on the parent controller. One way to achieve this is probably to use different naming for controllers: related SO answer
Otherwise, you could put the cancel function on the $scope variable in createOrEditPropertyModal.
Just change createOrEditPropertyModal.js:
vm.cancel = function () {
$uibModalInstance.close();
};
to
$scope.cancel = function () {
$uibModalInstance.close();
};
You can pass functions to modals similar to directives: related SO answer

Angular controller not found or defined while doing lazy loading

Hi iam using Angular with Require.
Require is managing my dependency sequence. Using lazy loading for loading controller and i was able to load my first home controller but when i wanted to navigate to dashboard controller then iam getting error dashboard controller is not found. hereis code
main.html
<body ng-app >
<div id="ViewPort" ng-view> </div>
</body>
shell.js
define(['mngRoute', 'mngSanitize'], function (ngRoute, ngSantize) {
var CMSapp = angular.module('CMS', ['ngRoute', 'ngSanitize']);
CMSapp.config(function ($routeProvider, $httpProvider) {
console.log($httpProvider);
$routeProvider
// route for the home page
.when('/', { templateUrl: 'App/Partials/home.html', resolve: loader(['Home']) })
.when('/Dashboard', { templateUrl: 'App/Partials/Dashboard.html', resolve: loader(['Dashboard']) })
});
CMSapp.run(function () {
console.log('shell loaded');
console.log(CMSapp);
});
return CMSapp;
Home Controller.js
define(function () {
angular.module('CMS').controller('HomeController', ["$scope", "$http", 'MainService', function ($scope, $http, mainService) {
$scope.message = 'Homess';
$scope.InitializeController = function ()
{
console.log(mainService);
mainService.initializeApplication($scope.initializeApplicationComplete, $scope.initializeApplicationError);
}
$scope.initializeApplicationComplete = function (response) {
console.log('in default initializeApplicationComplete');
}
$scope.initializeApplicationError = function (response) {
console.log('in default intialize error');
}
}]);
});
Home.html
<div data-ng-controller="HomeController" ng-init="InitializeController()">
<span>{{message}}</span>
Dashboardcontroller and dashboard.html are same only difference is the name
define(function () {
angular.module('CMS').controller('DashboardController', ["$scope", "$http", 'MainService', function ($scope, $http, mainService) {
$scope.message = 'Dashboard';
$scope.InitializeController = function ()
{
console.log(mainService);
}
}]);
});
Dasboard html
<div data-ng-controller="DashboardController" ng-init="InitializeController()">
<span>{{message}}</span>
i was able to load home and able to bind with model, but this not in dashboard when i entered localhost:8999/Main.html#/Dashboard in url it gives error.
See the chrome console Full console
Angular, Route, Dasboardcontroller.js homecontroller.js shell.js are loaded successfuly no error in console only error is Dasboard controller is not a function, got defined
When you use ng-app, Angular will search for a module called app. If you want to specify a custom module, you need to tell it: ng-app="CMS"
I hope this works! :)
<body ng-app >
should be
<body ng-app="CMS">
because in your code you declare your module as so.
angular.module('CMS'
Chrome console image console2
You can see my app is loaded bootstrapped and controllers are registered as well

viewContentLoaded event called multiple times for a single TemplateURL ui-router

I have a view as
<div class="wrapper" ui-view>
#RenderBody()
</div>
And the state that renderes a template called _BodyLayout is
(function () {
angular.module('ngApp').config(configuration);
configuration.$inject = ['$stateProvider'];
function configuration($stateProvider) {
$stateProvider.state('dashboard', {
url: '/dashboard',
templateUrl: '/Shared/_Bodylayout',
});
}
})(angular);
I have a run method where the template should register all plugins exactly once for the template when rendered as :
(function () {
'use strict';
angular.module("ngApp").run(run);
run.$inject = ['$rootScope', 'plugin-factory', '$timeout'];
function run($rootScope, plugins, $timeout) {
$rootScope.$on('$viewContentLoaded', function (event) {
plugins.run();
});
}
})(angular);
But on console.log shows that this event runs for multiple times and the plugins.run() method has been called at least 5 times for a single templateURL !!! That makes my sidebar plugin behave weird .
Can anyone tell me why its running 5 times instead of one time for a single templateURL ?

Resources