Fatal编程技术网
  • angularjs/
  • Angularjs 安格拉斯看着一个表情

Angularjs 安格拉斯看着一个表情

angularjs

Angularjs 安格拉斯看着一个表情,angularjs,Angularjs,假设我们有这个表达式 $scope.showButton = users.is_admin() && !document.is_provided; 然后在同一控制器中，您有一个按钮，用于更新文档的值。是否提供了： <button ng-click="document.is_provided = true;">Provide document</button> 提供文档 问题是$scope.showButton现在应该更改，但它没有更改 更新： Pln

假设我们有这个表达式

$scope.showButton = users.is_admin() && !document.is_provided;
然后在同一控制器中，您有一个按钮，用于更新
文档的值。是否提供了
：


<button ng-click="document.is_provided = true;">Provide document</button>



提供文档


问题是
$scope.showButton
现在应该更改，但它没有更改

更新：

Plnkr显示简化问题：
我不确定，但您可以观看：-


$scope.$watch(function(){
    return Users.is_admin() && !Document.is_provided;
},fuction(newVal){
$scope.showButton =newVal;
});



希望有帮助：）
这是一篇关于如何解决问题的好文章

如果您需要更大的答案，请添加解释
文档
变量的代码，以及您的REST服务

UPD:我看到你改变了原来的问题。我想你的控制器有问题。尝试不要隐式使用
$scope
，使用
数据
属性作为sad

还显示模板中连接控制器的零件

UPD 2:你对我的话有些误解，所以我修改了你的

index.html


<html ng-app="plunker">
  <body ng-controller="MainController as main">

    <div ng-show="main.data.document.is_provided">visible</div>
    <button ng-click="main.hide()">Hide</button>

    <script data-require="angular.js@1.4.x" 
            src="https://code.angularjs.org/1.4.1/angular.js" 
            data-semver="1.4.1"></script>
    <script src="app.js"></script>
  </body>
</html>



您在
ng click
中有一个问题，因为应该有函数执行。此外，您使用的是
ng if
而不是
ng show
处理此类问题的最佳方法（imho）：
在您的视图中使用
{{anyObject | json}

这样，您就知道您正在使用的引用和对象是否存在于您的作用域中。当对象存在但为空时，使用
|json
会给您带来
{}
的赞誉。如果您的对象在您的范围内不可用，注意是“打印的”

在您的情况下，将body标记更改为：


然后，在此控制器的html中添加：


DATA: {{mainCtrl | json}}


现在你可以看到你的变量了！您还可以看到，单击按钮不会更改布尔变量

通过一些额外的调试和重写，可以实现以下功能：


app.controller('MainCtrl', function($scope) {

var main = this;

this.data = {
  document: {
    is_provided: true
  }
};



$scope.hide = function() {
  console.log(main);
  main.data.document.is_provided = !main.data.document.is_provided;
}
});


以及：

Hide
（注意括号）
我想补充一下squiroid的答案，并向您解释它的工作原理。我将提供一个非常简单的方法让您理解，因为这在我开始时也是一个非常常见的问题

有一种叫做消化循环的东西。这是一系列连续调用的函数，以确保如果变量a双向绑定到另一个变量B（例如使用ng模型），它们始终保持同步（即始终具有相同的值）。angular提供的函数（或通常以$开头的服务，如$timeout等）会自动启动摘要周期

假设你有一个变量a，你把它绑定到$scope变量B，它等于一个变量C。你会期望C也绑定到a，对吗？因为你认为当你改变C时，B应该改变，所以A也应该改变。但这只有在你开始消化周期的时候才有可能。循环将查找需要更新的变量，并将更新它们。然而，通过简单地更改C的值，您将永远不会触发摘要循环，因此您的更改将永远不会传播到A

当您在$watch中放入一个变量时（正如$watch所示），您将强制启动一个摘要周期。所以现在当你改变C，你开始循环，它跟踪到它也需要更新A，这就是为什么它工作的原因

在您的示例中，$scope.showButton绑定到document.is\u。现在您正在使用一个非角度函数来更改document.is_的值。这意味着您不会触发摘要周期，这意味着您的更改将永远不会传播到$scope.showButton。因此，showButton始终保持为false

当然，还有一个例子可以帮助您理解：


注意控制台。我添加了日志以帮助您理解。
注释掉$watch语句，看看会发生什么。
试着理解它，然后自己动手，你会明白的


希望我能帮忙：）
谢谢你的帮助。我创建了一个工作plnkr来向您展示这个问题：OP明确地使用
$scope
。你是什么意思？我是在他提到后加的。你能给我看一个工作的plnkr吗？我做不到work@JadJoubran很抱歉链接错误，但代码已满，您可以自己尝试。顺便说一句，链接是固定的。为什么您认为
$scope.showButton
的值应该更改？我需要一种方法使其重新计算。。因此，我要求使用angular（而不是将其包装在函数中，然后每次更改值时调用它）来实现这一点的最佳方法。您的Plnkr代码与您的问题不匹配。你能更新一下吗？这也行！但是我更想看看我们如何在没有$watch的情况下让它工作我不明白。这里在看什么？介意解释一下吗？@geckob第一个参数是应该关注的表达式（在本例中，它是一个返回true或false的函数），如果返回值为true（这意味着Users.is_admin（）和！Document.is_provided都为true），则$scope.showButton将变为true。因此Angular管理这两个“待观察”的值，即Users.is_admin（）和Document.is_提供的值。通常情况下，您只需要wacht一个值，比如$scope.$watch（'scopesVariable'，function（newVal，oldVal）{…}），但一般来说，也可以定义一个函数，请注意，如果您将它包装在
pre
标记中：
{data | json}，那么调试技巧的可读性可能会更好
@Sander\P谢谢您的回答，但我仍然不明白您为什么要使用
var main=this
是否有一篇文章可以指导我完成此操作？我现在理解了它的工作原理，但我以前从未见过它。之所以出现在我的代码中，是因为它出现在您的代码中：）就我个人而言，我尽量避免在控制器中使用代码，并将其放在指令（dom逻辑）或服务（业务逻辑）中。尝试使用带有链接函数的指令，并使用$scope而不是“this”。非常感谢！实际上

app.controller('MainCtrl', function($scope) {

var main = this;

this.data = {
  document: {
    is_provided: true
  }
};



$scope.hide = function() {
  console.log(main);
  main.data.document.is_provided = !main.data.document.is_provided;
}
});