Question

我创建了一个使用Bootstrap的Angular应用程序。我将项目基于我下载和研究的模板。我从这里下载了它：https://angularstart.codeplex.com

我没有使用或修改模板来创建我现在拥有的项目。相反，我创建了一个新项目并使用Nuget下载Angular＆amp; amp;的最新软件包。自举。

问题在于我的联系人＆＃39;页面，其中包含一个表单，供网站访问者向我发送消息。我在控制器中定义了一个函数 - sendMessage - 通过ng-click绑定到HTML中的按钮。

appRoot.controller('ContactController', ['$scope', '$http', function ($scope, $http) {
    $scope.contactModel = {};
    $scope.sendMessage = function () {
        alert('msg: ' + $scope.contactModel.msgSubject);
    }
}]);

<input type="text" id="msgSubject" name="msgSubject" data-ng-model="contactModel.msgSubject" />
<button class="btn btn-primary" ng-click="sendMessage()" >Send Message</button>

按钮和单击事件工作正常，但在函数内部，它无法访问模型变量。它返回一个未定义的＆＃39; - 警报说＆＃34; msg：undefined＆＃34;

我已经研究了三天了。我已经查看了plunkr和jsfiddle上的其他演示代码，并且我已经看到它有效但我的设置中的某些内容阻止了对范围变量的访问（基本上是我定义的模型变量）。

我的角度app.js是：

var appRoot = angular.module('main', ['ngRoute', 'ngResource']);  
appRoot
    .config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', { templateUrl: '/main/home', controller: 'HomeController' })
            .when('/home', { templateUrl: '/main/home', controller: 'HomeController' })
            .when('/contact', { templateUrl: '/main/contact', controller: 'ContactController' })
    }])
    .controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
        $scope.$on('$routeChangeSuccess', function (e, current, previous) {
            $scope.activeViewPath = $location.path();
        });
    }]);

我在初始化contactModel变量时测试了添加变量：

$scope.contactModel = { msgSubject: 'tst sub' };

＆＃39; sendMessage＆＃39;内的警报函数看到这个并显示＆＃34; msg：tst sub＆＃34;正确。

我已经为ContactController尝试了不同的配置，包括传递$ location和$ resource，如下所示：

appRoot.controller('ContactController', function ($scope, $location, $resource) {

}

但仍无法访问范围变量。

在所有样本和＆amp;我已经检出了演示 - 包括Angular Start tempate - 控制器可以访问定义的ng-model变量。让我觉得它必须在我的配置或使用Angular或Bootstrap的不同版本。

我的_Layout.cshtml定义了默认控制器和ng-app，如下所示：

<body data-ng-app="main" data-ng-controller="RootController"style="background-color:transparent;" >

Angular版本是v1.2.2，Bootstrap是v3.1.0

任何帮助都是有用的。感谢

Answer 1

我想我已经把它缩小了。我想补充一点，我也在使用带有Razor的ASP.NET MVC。

如果我将HTML代码放在@RenderBody（）之外，并将javascript警报放在RootController中，则代码可以正常工作：

<div >
    <div>
        <input type="text" id="msgSubject" name="msgSubject" data-ng-model="contactModel.msgSubject" />
        <button class="btn btn-primary" ng-click="sendMessage()" >Send Message</button>
    </div>
</div>

<div >
    @RenderBody()
</div>

和Javascript：

app.controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
    $scope.$on('$routeChangeSuccess', function (e, current, previous) {
        $scope.activeViewPath = $location.path();
    });
    $scope.contactModel = {};
    $scope.sendMessage = function () {
        alert('msg: ' + $scope.contactModel.msgSubject);
    }
}]);

如果HTML在局部视图（cshtml）中，则Angular控制器不会看到ng-model定义的范围变量。

也许Angular执行被ASP.NET MVC的Razor引擎阻止了？ @RenderBody（）中正在发生的事情可能正在剥离功能..

无法访问控制器中的$ scope变量 - AngularJS

1 个答案: