Angular JS「Controller as」語法不起作用

我已經構建了一個AngularJS項目，並且熟悉了這個語法。這次我的ng-controller="UniversalCtrl as universal"沒有工作，我嘗試了一切。如果我採取universal.showHeader == true並將其更改爲showHeader == true它可以工作，但我需要它是universal的變量。就像我說的，我有其他項目遵循這個相同的結構，他們工作得很好。Angular JS「Controller as」語法不起作用

這裏是我的HTML代碼：

<!DOCTYPE html> 
<html> 
    <head lang="en"> 
     <meta http-equiv="cache-control" content="no-store" /> 
     <meta http-equiv="expires" content="0" /> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
     <meta http-equiv="pragma" content="no-store" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> 

     <link href="styles/MarkStrap.css" rel="stylesheet" /> 
     <link href="styles/Site.css" rel="stylesheet" /> 

     <script type="text/javascript" src="js/Angular/angular.min.js"></script> 
     <script type="text/javascript" src="js/Angular/angular-route.min.js"></script> 
     <script type="text/javascript" src="js/Universal/Universal.js"></script> 
     <script type="text/javascript" src="js/Universal/Filters.js"></script> 
     <script type="text/javascript" src="js/Universal/Directives.js"></script> 

     <title>WIN</title> 
     <link rel="shortcut icon" href="winIcon.ico"> 
    </head> 
    <body ng-app="winApp" ng-controller="UniversalCtrl as universal"> 

     <index-header ng-show="universal.showHeader == true"></index-header> 
     <ng-view></ng-view> 

     <script type="text/javascript" src="js/Applications/Applications.js"></script> 
    </body> 
</html>

這裏是我的Universal.js設置：

(function() { 
    var winSystem = angular.module('winApp', ['ngRoute']); 

    winSystem.config(function ($sceProvider, $routeProvider) { 
     $routeProvider 
       .when('/Applications', { 
        templateUrl: "view-app.html", 
        controller: "AppController" 
       }) 
       .otherwise({ 
        templateUrl: "404.html" 
       }) 
    }); 

    winSystem.service("sharedData", function() { 
     var reloadData = false; 
     var beginAppLoad = false; 
     var reloadNotes = false; 

     self.httpGet = function (http, url, callback) { 
      http.get(baseUrl + url, { 
       headers: { "Session-Id": localStorage.ogSessionId } 
      }).success(function (data) { 
       callback(data); 
      }).error(function (data, status, headers, config) { 
       if (status == "401") { 
        localStorage.removeItem("ogSessionId"); 
        localStorage.removeItem("ogUserId"); 
        window.location.href = loginUrl; 
       } 
      }); 
     }; 

     self.httpPost = function (http, url, content, callback) { 
      http.post(baseUrl + url, { 
       Content: JSON.stringify(content) 
      }, { 
       headers: { 
        "Session-Id": localStorage.ogSessionId 
       } 
      }) 
       .success(function (data) { 
        callback(data); 
       }) 
       .error(function (data, status, headers, config) { 
        if (status == "401") { 
         localStorage.removeItem("ogSessionId"); 
         localStorage.removeItem("ogUserId"); 
         window.location.href = loginUrl; 
        } 
       }); 
     }; 


    }); 

    winSystem.controller("UniversalCtrl", ['$scope', '$http', 'sharedData', function ($scope, $http, sharedData) { 
     var self = $scope; 

     self.sharedDataSvc = sharedData; 
     self.isLocal = false; 

     if (location.href.indexOf("localhost") > -1) { 
      self.isLocal = true; 
     } else self.isLocal = false; 

     self.account = {}; 
     self.actions = []; 
     self.notifications = []; 

     self.alertCount = 0; 
     self.showAlert = false; 
     self.showHeader = true; 
     self.alertMessage = ""; 

    }]); 
})();

來源

2015-03-31 Ohjay44

controllerAs語法的重點在於不使用$ scope。你必須將變量綁定到你的控制器中的「this」。 – cuttlas 2015-03-31 14:23:29

您確定您導入的Angular庫是1.2或更高版本（當Controller As語法被引入時）？ – 2015-03-31 14:24:04

嗨大衛，我使用1.3.15說最新和最穩定。這也是我在其他項目中使用的相同腳本。 – Ohjay44 2015-03-31 14:26:17

你的模型結合的範圍對象，而不是控制器實例。嘗試：

winSystem.controller("UniversalCtrl", ['$http', 'sharedData', function ($http, sharedData) { 
    var self = this; 

    self.sharedDataSvc = sharedData; 
    self.isLocal = false; 

    if (location.href.indexOf("localhost") > -1) { 
     self.isLocal = true; 
    } else self.isLocal = false; 

    self.account = {}; 
    self.actions = []; 
    self.notifications = []; 

    self.alertCount = 0; 
    self.showAlert = false; 
    self.showHeader = true; 
    self.alertMessage = ""; 

}]);

而且我注意到，您使用的是自變量的服務sharedData但你沒有初始化它。同樣的'var self = this'

來源

2015-03-31 14:24:25 Raulucco

謝謝你，我忽略了這兩件事，現在當我將它們與其他項目進行比較時，我確實正是我所缺少的。 – Ohjay44 2015-03-31 14:29:55

Angular JS「Controller as」語法不起作用

回答

相關問題