如何解决Angular $ scope问题？

Question

我有一个部分使用一个称为CaseNotesCtrl的控制器。 我在访问此部分内部的$ scope变量时遇到问题。 代码是这样的：

<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>

这是控制器代码：

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);


}]);

如您所见，我不得不在$parent.addingNote地方使用$parent 。 如果我将其更改为$scope.addingNote ，则不会调用该函数。 我对$parent唯一满意的地方是$parent.isLoggedIn 。 我如何解决这个问题，使其只使用$scope ？

Answer 1

我建议您在使用ng-controller时使用AngularJS“ Controller as”语法。

在这种情况下，将是这样的：

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


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

因此，您很容易知道您正在使用哪个范围。