UI-Router AngularJS controller not working with state

Question

I am trying to understand how UI-Router works with Angular and I am having a tough time.

I have an index:

 <body>
  <div ui-view></div>

 <!--Location of file holding app-->
 <script src="App/indexApp.js"></script>
 <!--source of state2 Controller-->
 <script src="App/itemsController.js"></script>
 </body>

an app.js:

 var app = angular.module("ITS", ['ui.router'])
 .config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function ($httpProvider, $stateProvider, $urlRouterProvider) {
 $urlRouterProvider.otherwise("/home");
    $stateProvider.state('home', {
        url: "/home",
        templateUrl: "Home.html",
        controller: 'IndexCtrl'
    })
 $stateProvider.state('newItem', {
        url: "/newItem",
        templateUrl: "new.html",
        controller: 'ItemCtrl'

    })

a file for the controller:

 app.controller("ItemCtrl", ['$scope', '$location', '$state',
function ($scope, $location, $state) {
 $scope.testButton = function () { //Test FUNC
    $window.alert("hey");
}
 $scope.title="hello";

and finally an html page for the view:

 <div ng-app="ITS" ng-controller="ItemCtrl">
 <body>
 <button ng-click="testButton()">Test</button>
 <input type="text" ng-model="title"/>
 </body>
 </div>

PROBLEM: Home loads fine, and I can navigate from "Home" to "New" with a ui-sref, and I can see the test button. I know the controller is working and is being accessed, but when I click the button nothing pops up, and the field associated with "title" is not populated by $scope.

I have heard resolves are important for loading data before a state is changed, but I cannot seem to find much information on them for a problem like this one. Any help would be most appreciated.

user1846747 · Accepted Answer · 2016-03-11 19:21:38Z

1

I guess this might because of import error. You are using $window.alert() in your method, but $window is not being included as a dependency.

Try adding $window to your controller like this

app.controller("ItemCtrl", ['$scope', '$location', '$state', '$window',
    function ($scope, $location, $state, $window) {
        $scope.testButton = function () { //Test FUNC
            $window.alert("hey");
        };
        $scope.title="hello";
    }]);

This might work. Also check your console for errors.

answered Mar 11, 2016 at 19:21

user1846747

Sign up to request clarification or add additional context in comments.

1 Comment

byteGeist Over a year ago

That is definitely a problem with the code I posted. I removed a bunch of dependencies when I posted it so it wouldn't be overly complicated, and when I do that I just create more issues. Thank you anyway, I managed to figure it out. In my own code that I didn't post I had been using $scope.item.Title, and for some reason that extra dot operator really breaks stuff.

Collectives™ on Stack Overflow

UI-Router AngularJS controller not working with state

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related