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

Question

我想在角控制器FollowBtnCtrl中使用输入FollowBtnCtrl值，我做了一个按钮，称为followMe()函数，定义在FollowBtnCtrl控制器内，当我在控制器内得到$scope.fId值时，它显示了未定义的值。请检查我的代码，并告诉我哪里错了，对不起，这个愚蠢的问题，但我是新来的angularjs。提前感谢

角控制器：

.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

在新的角度应用程序中，在fId中使用value属性是一个常见的错误。如果可以避免，则不希望将值写入服务器上的HTML中。事实上，如果您可以避免让服务器完全呈现HTML，那就更好了。

理想情况下，您希望发送您的角度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);
    }
});