Question

在我的我的文件中，我有一个带有ng-view的div，它加载了一些模板。在temp`late里面，我有一个可以改变价值的按钮。

点击按钮后，我试图在索引中显示值，但我收到一个空值。

在index.html中我可以有类似的东西：

<html>
    ...
    <body ng-app="productsApp" ng-Controller="mycontroller">
      <div ng-view></div>

      {{value}}
    </body>
</html>

在我的控制器中，我有类似

的东西

angular.module('productsApp').controller('ProductController', 
    ['$scope', 'dataService', function ($scope, dataService) {

    $scope.value;

    $scope.button = function () {
        $scope.value=  "123";
    };
}]);

模板可能类似于：

<button ng-click="button">CHANGE</button>

如何从模板中为主页面指定值并显示它们？

Answer 1

您需要注意您设置的控制器，名称必须匹配。即使打字很快，也要小心拼写错误;）。另请查看函数调用。你忘了在最后使用（）。并且建议将事情命名为更好（我不是说我的命名是最好的，但是调用函数按钮不是很易读）。

HTML

  <body ng-controller="MainCtrl">
    <p>Value {{value}}!</p>
    <button ng-click="btnPressed()">Change</button>
  </body>

JS

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.value = "456";

  $scope.btnPressed = function() {
    $scope.value = 123;
  }
});

此示例中的控制器名称为MainCtrl。您还需要在HTML中引用正确的名称（混合mycontroller和ProductController）。

工作Plnkr

http://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2

Answer 2

您已在$scope.button中定义了ProductController，其中设置了$scope.value。

但是这个$scope.value属于ProductController的范围，并且在mycontroller范围内不可用于哪个父范围。这就是为什么你得到空值。

在$scope.value中定义$scope.button和mycontroller。

或者更好的方法是在某些factory中定义此功能，并在需要的地方访问它。

或者在$rootScope中定义该函数和变量

 $rootScope.value;

但它使这个全球化。

或定义如下

 $scope.$parent.value;

AngularJS：如何从模板中为主页面指定值并显示它们？

2 个答案:

HTML

JS

工作Plnkr