How can I fix this Angular $scope issue?

Question

I have a partial that uses one controller called CaseNotesCtrl. I am having problems accessing $scope variables inside of this partial. The code is this:

<div class="row" ng-show="$parent.loggedin" ng-controller="CaseNotesCtrl">
    <div class="col-sm-12 note
-field" ng-show="$parent.addingNote">
        <label for="noteEntry">Enter your note</label>
        <textarea class="form-control" name="noteEntry" rows="4" ng-model="newNote.note"></textarea>
        <br />
        <a href="" class="btn btn-xs btn-danger calicon-view note-save-button" ng-click="saveCaseNotes(note.Case.CaseID, note.User.UserID, note.NoteID)" data-toggle="tooltip" data-placement="top" title="Save Note"  tooltip><span class="glyphicon glyphicon-floppy-save"></span></a>
        <a href="" data-toggle="tooltip" data-placement="top" title="Cancel Adding Note" class="btn btn-xs btn-danger calicon-view note-cancel-button" ng-click="$parent.cancelNote();" tooltip>
            <span class="glyphicon glyphicon-remove-sign"></span>
        </a>
    </div>
    <div class="col-sm-12">
        <a href="" data-toggle="tooltip" data-placement="top" title="Add a Note" class="btn btn-xs btn-danger calicon-view note-add-button" ng-click="$parent.addNote();" ng-show="!$parent.addingNote" tooltip>
            <span class="glyphicon glyphicon-list-alt"></span>
        </a>
    </div>
    <div class="col-sm-12 note-list-heading" ng-repeat-start="note in caseNotes">
        <span class="note-header">Note entered by {{ note.User.DisplayName }} and was last edited on {{ note.ModifiedDate | date: "MM/dd/yyyy 'at' h:mma" }}</span><a href="" data-toggle="tooltip" data-placement="top" title="Edit This Note" class="btn btn-xs btn-danger calicon-view pull-right note-edit-button" ng-click="editNote(note.Case.CaseID, note.NoteID, note.Notes)" tooltip><span class="glyphicon glyphicon-edit"></span></a>
    </div>
    <div class="col-sm-12 note-text">
        {{ note.Notes }}
    </div>
    <div ng-repeat-end></div>
</div>

here is the controller code:

JBenchApp.controller('CaseNotesCtrl', ['$scope', '$http', '$routeParams', 'HoldState', function ($scope, $http, $routeParams, HoldState) {

    // Management of case notes
    $scope.NotesCaseID = $routeParams.number;
    $scope.NotesUserName = localStorage.getItem('UserName');
    $scope.NotesUserRole = localStorage.getItem('UserRole');
    $scope.addingNote = false;

    $scope.newNote = { note: 'Testing 123', CaseID: 0, NoteID: 0 };

    $scope.getCaseNotes = function (CaseID, UserName, UserRole) {
        $http.get('http://10.34.34.46/BenchViewServices/api/CaseNote/' + CaseID + "/" + UserRole + "/" + UserName).success(function (response) {
            $scope.caseNotes = response;
        })
    };

    $scope.saveCaseNotes = function (CaseID, UserName, NoteID) {

        $scope.addingNote = false;
    };

    $scope.addNote = function () {
        $scope.addingNote = true;
    };

    $scope.cancelNote = function () {
        $scope.newNote.note = '';
        $scope.addingNote = false;
    };

    $scope.editNote = function(caseID, noteID, noteText){
        $scope.newNote.note = noteText;
        $scope.newNote.CaseID = caseID;
        $scope.newNote.NoteID = noteID;
        $scope.addingNote = true;
        $parent.addingNote = true;
    };

    $scope.getCaseNotes($scope.NotesCaseID, $scope.NotesUserName, $scope.NotesUserRole);


}]);

As you can see I am having to use $parent in places such as $parent.addingNote . If I change that to $scope.addingNote the function isn't called. The only place I am OK with $parent is $parent.isLoggedIn . How can I fix this so that it just uses $scope ?

Answer 1

I would suggest you to use the AngularJS "Controller as" syntax when using ng-controller.

In this case it would be something like this:

app.controller('CaseNotesCtrl', function () {
    this.title = 'Some title';
});


<div ng-controller="CaseNotesCtrl as caseNotes">
   {{ caseNotes.title }}
</div>

So you it would be easy to you to know which scope are you working with.