Question

在我的MVC程序中，简单的角度值控制器值不具有约束力。我的代码如下：

_Layout.cshtml

<body data-ng-app="ShoppingCartApp">   
     <div class="container body-content">
        @RenderBody()
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/Scripts/angular.js")
        @Scripts.Render("~/Scripts/Custom/App.js")
        @Scripts.Render("~/Scripts/Custom/ShoppingCartController.js")
        @RenderSection("scripts", required: false)
        <hr />
    </div>
</body>

App.js

var app = angular.module('ShoppingCartApp', []);

ShoppingCartController.js

app.controller('ShoppingCartController', function ShoppingCartController($scope, $http) {
    $scope.ShoppingCartObj.products = [];
    $scope.test = "ABC";

    // On load events
   // $scope.loadValues();
});

我的Html代码如下：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script></script>
<h2>Index</h2>
Total {{2+2}} // This value workd FINE
<div ng-controller="ShoppingCartController">
    <div class="row">
        <div class="nav navbar-nav navbar-left">
            <h3>Total {{2+2}}</h3> // Not working THIS
        </div>
        <h1>{{test}}</h1> // Not working THIS

    </div>
</div>

当我尝试访问控制器中的值或控制器内的访问指令时，它无法正常工作。我在这里想念的是什么？

Answer 1

将您的控制器更改为：

app.controller('ShoppingCartController', function($scope, $http) {....});

或者创建一个名为ShoppingCartController的函数，然后将其传递给控制器：

app.controller('ShoppingCartController', ShoppingCartController);

同时将$scope.ShoppingCartObj.products更改为$scope.ShoppingCartObj = {};，然后将产品添加到该对象$scope.ShoppingCartObj.products = [];，因为您已经定义了$ scope.ShoppingCartObj的内容，因此该对象将是未定义的。

Answer 2

如果您正在使用Bundler，则需要指定依赖注入值

此外 - ShoppingCartObj未在任何地方声明，因此您无法指定属性products

app.controller('ShoppingCartController', ['$scope', '$http', 
    function ShoppingCartController($scope, $http) {
       $scope.ShoppingCartObj = {},
       $scope.ShoppingCartObj.products = [];
       $scope.test = "ABC";

}]);

这是一个有效的Jsfiddle

AngularJS - 控制器值不绑定

2 个答案: