Angular 控制器 $scope.fId 显示未定义的值

Question

我想在 angular 控制器 FollowBtnCtrl 中使用输入 fId 值，我制作了一个调用 followMe() 函数的按钮，在 [=15= 中定义] 控制器，当我在控制器中获取 $scope.fId 值时，它显示未定义的值。请检查我的代码并告诉我哪里错了，很抱歉这个愚蠢的问题，但我是 angularjs 的新手。提前致谢

angular 控制器：

.controller("FollowBtnCtrl", function ($scope) {
    $scope.followMe = function () {
        alert($scope.fId);
    }
});

Html代码：

<div ng-controller="FollowBtnCtrl">
    <ons-toolbar-button>
        <input ng-model="fId" id="fId" type="hidden" value="10" />
        <button ng-click="followMe()" class="followButton button button">
            Hello
        </button>
    </ons-toolbar-button>
</div>

Answer 1

您 ons-toolbar-button 指令创建了另一个作用域。您可以访问父级 followMe()，但父级无法访问该作用域的已定义变量 (fId)。许多解决方案...这是一个：

ng-click="followMe(fId)" 和 $scope.followMe = function(fId){...}

Answer 2

您不能在 angular.This 中使用 value 属性为 fId 赋值是新 Angular 应用程序中的常见错误。如果可以避免，您不想将您的值写入服务器上的 HTML 中。事实上，如果您可以完全避免让您的服务器呈现 HTML，那就更好了。

理想情况下，您希望发送 Angular HTML 模板，然后通过 JSON 中的 $http 提取您的值并将它们放入您的范围。但是如果你想通过 html 提供值，你可以使用 ng-init 来实现。

<input ng-model="fId" id="fId" type="hidden" ng-init="fId=10" />

另请参阅：AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?

Answer 3

ng-model用于双向绑定，即改变输入的值。

这就是为什么，您需要做的是删除输入的 value 属性并在您的控制器中初始化 fId。

您的输入：

<input ng-model="fId" id="fId" type="hidden" />

和您的控制器：

.controller("FollowBtnCtrl", function ($scope) {
    $scope.fId = 10;

    $scope.followMe = function () {
       alert($scope.fId);
    }
});

Angular 控制器 $scope.fId 显示未定义的值

Angular Controller $scope.fId showing undefined value

html

javascript

controller

angularjs

onsen-ui