Angularjs controller does not work well

Asked

Viewed 329 times

1

I am giving a basic study on how to create screens using Angularjs and Material, everything going well until I need the controller, it seems that $Scope is not working, I put a console.log at the beginning of the controller and it prints the text, but the values set for $Scope are not applied on the screen and the functions called using ng-click are also not executed.

<body ng-app="App" layout="column" ng-controller="PageController as pc">

<md-toolbar layout="row" layout-align="start center">
    <md-button class="menu" ng-click="pc.toggleMenu()">
        <i class="material-icons">menu</i>
    </md-button>
    <h1>Angular Material</h1>
</md-toolbar>

<div class="container" layout="row" style="min-height: 100%;">
    <md-sidenav md-is-locked-open="$mdMedia('gt-sm')" class="md-whiteframe-4dp" flex="20" md-component-id="left">
        {{pc.sidenav}}
    </md-sidenav>

    <md-content id="content" flex>
        <md-button class="md-raised">BUTTON</md-button>
        <md-button class="md-raised md-primary">BUTTON</md-button>
        <md-button class="md-raised md-accent">BUTTON</md-button>
        <md-button class="md-raised md-warn">BUTTON</md-button>
    </md-content>
</div>  
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">    </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>


<script type="text/javascript">    

angular.module('App', ['ngMaterial'])
.controller('PageController', function($scope, $mdSidenav){
    console.log('Aparece no console!');

    $scope.sidenav = "Sidenav";
    $scope.toggleMenu = function() {
        console.log('toggleMenu');
        $mdSidenav('left').toggle();
    };
})
.config(function($mdThemingProvider) {
    $mdThemingProvider.theme('default')
        .primaryPalette('blue')
        .accentPalette('orange')
        .warnPalette('deep-orange').dark();
});    
</script>

</body>

The. config and the.log() console in the . controller work, only the $Scope that is not working.

angularjs controller angularjs-scope angular-material

  • There is only need for alias "pc" when there is more than one control in the view. Also you have incorporated your script into the element where you are calling it? Put your script outside the body, in a separate file. And call the ng-app in HTML

1 answer

3


You made a small mistake when declaring the controller you used ng-controller="PageController as pc" and at the time of using the property you set the value in $Scope, ie you ta settando in one place and trying to read from the other.

Change your controller as follows:

var vm = this;
vm = "Sidenav";

This solves your problem. That way the value is being set in the controller and no longer in the $scope.

You can read more about it here.

Browser other questions tagged angularjs controller angularjs-scope angular-material

You are not signed in. Login or sign up in order to post.