在标记中设置角度范围变量答案

【问题标题】：Set angular scope variable in markup在标记中设置角度范围变量
【发布时间】：2013-05-28 15:51:14
【问题描述】：

简单问题：如何在 html 中设置范围值，以供控制器读取？

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

app.controller('MyController', function($scope) {
  console.log($scope.myVar);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="MyController" app-myVar="test">
    {{myVar}}
  </div>
</div>

JSFiddle：http://jsfiddle.net/ncapito/YdQcX/

【问题讨论】：

您最好创建一个指令来处理这个问题。指令将封装：参数、特定于该指令的控制器以及“myMap”标记的模板。
这实际上是我所做的......只是在指令控制器中访问 $scope.myVar 时遇到了一些问题。为什么我必须在控制器中使用手表来访问范围变量？
也许你可以发布你的指令？在docs.angularjs.org/guide/directive 此处查看“了解嵌入和作用域”您可能需要作用域：{ myVar : '=' }，当您调用它时您会说my-var="foo"。注意连字符与驼峰式的使用。注意：foo 这里是已评估，如果您不希望在范围定义中使用“@”来访问属性的值。
@Nix 你能解释一下为什么需要在视图中初始化值，而不是在你的控制器中？我假设您已经知道这不是初始化值的传统方式（否则您不会问），如果其他人更了解您的用例，他们将能够为您提供更好的答案。
@SeantheBean 我年轻又愚蠢... ;) 我不知道为什么我需要这样做。我可能正试图破解某些东西。

标签： angularjs angularjs-scope

【解决方案1】：

ng-init 在循环内分配变量时不起作用。采用 {{myVariable=whatever;""}}

结尾的 "" 停止将 Angular 表达式计算为任何文本。

然后你可以简单地调用{{myVariable}}来输出你的变量值。

我发现这在迭代多个嵌套数组时非常有用，我希望将当前的迭代信息保存在一个变量中，而不是多次查询它。

【讨论】：

虽然这行得通，但它看起来很老套。也就是说，将{{}} 仅用于输出单个变量而不用于分配变量通常是一种很好的做法。我会说stackoverflow.com/a/16799763/814160 更正确（视图中的 JS 代码更少）。
+1 for @SeantheBean - 我已经对此进行了测试。子控制器和在标记中分配变量的范围似乎存在问题。该指令适用于我的目的，似乎是一个可靠的解决方案。
这似乎不适用于 angular2/4 - 绑定不能包含分配
@Demodave 您应该改为在 Typescript 代码中设置所有控制器变量，并仅使用模板将 Typescript 连接到 HTML。模板不应分配变量。

【解决方案2】：

ngInit可以帮助初始化变量。

<div ng-app='app'>
    <div ng-controller="MyController" ng-init="myVar='test'">
        {{myVar}}
    </div>
</div>

jsfiddle example

【讨论】：

应该注意的是，他们不推荐这种解决方案用于实际应用程序（但并不真正建议替代方案）：docs.angularjs.org/guide/dev_guide.mvc.understanding_model
这对我有用，但是，起初该变量在控制器中仍未定义。我做了一个小区间循环： var interval = setInterval(function() { if ($scope.whatever) { // dostuff clearInterval(interval); } }, 10);

【解决方案3】：

创建一个名为 myVar 的指令

scope : { myVar: '@' }

然后这样称呼它：

<div name="my_map" my-var="Richmond,VA">

特别注意指令中对连字符标记名称的驼峰式引用。

有关更多信息，请参阅此处的“理解转入和作用域”：- http://docs.angularjs.org/guide/directive

Here's a Fiddle 展示了如何在指令中以各种不同的方式将值从属性复制到作用域变量。

【讨论】：

我希望能够做多个var-nick='my' var-nick2='test'。除非你能想出用指令来实现它的方法，否则我只会使用ng-init
您可以在作用域中包含多个属性，您所需要的只是其中一个是您要执行的指令的名称（或者在 html 中也包含该指令名称）。 scope: {varNick: '@', varNick2: '@'}
但它不可扩展？我必须为每个变量定义一个指令？
不，您不需要每个变量的指令。看看我添加到答案中的小提琴。
对不起，我错过了阅读，你的例子很完美，我唯一的改变是 scope{'@': '@"}。

【解决方案4】：

您可以像这样从 html 设置值。我认为 Angular 还没有直接的解决方案。

 <div style="visibility: hidden;">{{activeTitle='home'}}</div>

【讨论】：

Nice hack ...不过会推荐<div style="display: none">。

【解决方案5】：

如下图可以使用ng-init

<div class="TotalForm">
  <label>B/W Print Total</label>
  <div ng-init="{{BWCount=(oMachineAccounts|sumByKey:'BWCOUNT')}}">{{BWCount}}</div>
</div>
<div class="TotalForm">
  <label>Color Print Total</label>
  <div ng-init="{{ColorCount=(oMachineAccounts|sumByKey:'COLORCOUNT')}}">{{ColorCount}}</div>
</div>

然后在其他部分使用局部范围变量：

<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>

【讨论】：

我喜欢这种方法；似乎不那么hacky。不过需要澄清一下，ng-init 不需要花括号。

【解决方案6】：

$scope.$watch('myVar', function (newValue, oldValue) {
        if (typeof (newValue) !== 'undefined') {
            $scope.someothervar= newValue;
//or get some data
            getData();
        }


    }, true);

变量在控制器之后初始化，所以你需要注意它，当它没有初始化时使用它。

【讨论】：

【解决方案7】：

我喜欢这个答案，但我认为您最好创建一个全局范围函数，以便您设置所需的范围变量。

所以在 globalController 中创建

$scope.setScopeVariable = function(variable, value){
    $scope[variable] = value;
}

然后在你的html文件中调用它

{{setScopeVariable('myVar', 'whatever')}}

这将允许您在各自的控制器中使用 $scope.myVar

【讨论】：

【解决方案8】：

如果你不在循环中，你可以使用 ng-init 否则你可以使用

{{var=foo;""}}

"" 允许不显示你的变量

【讨论】：

【解决方案9】：

您可以在隐藏字段中使用 ng-value 指令，如下所示：-

<input type="hidden" ng-value="myScopeVar = someValue"/>

这会将范围变量（myScopeVar）的值设置为“someValue”

【讨论】：