Angular Controller $scope.fId 显示未定义的值

Posted 2023-03-05

【中文标题】Angular Controller $scope.fId 显示未定义的值

【英文标题】：Angular Controller $scope.fId showing undefined value

【发布时间】：2016-01-04 12:07:42

【问题描述】：

我想在角度控制器FollowBtnCtrl 中使用输入fId 值，当我在控制器内部获取$scope.fId 值时，我制作了一个调用followMe() 函数的按钮，在FollowBtnCtrl 控制器内部定义它显示未定义的值。请检查我的代码并告诉我哪里错了，很抱歉这个愚蠢的问题，但我是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>

【问题讨论】：

ng-model="fId" 没有赋值！试试这个jsfiddle.net/6a9usr8w

我们可以使用我们已经给出的输入值 10。

不，我们不能将value 视为model 值..

【参考方案1】：

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

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

【讨论】：

你是对的，你的解决方案真的很有帮助和赞赏，谢谢

【参考方案2】：

您不能使用 Angular 中的 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?

【参考方案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);
    
);