在指令中更改控制器作用域变量不会反映在控制器功能中
在我的指令中，我有一个控制器变量，页面在您按指令中的按钮时会增加。但是，scope.alertPage()调用控制器功能的下一行不会反映此更改。请注意，当您单击按钮页面时，其警报仍为1！
我知道我可以通过在控制器中添加$ scope。$ apply来解决此问题，但随后出现错误，提示摘要已在进行中。
柱塞
app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.page = 1;
$scope.alertPage = function() {
alert($scope.page);
}
})
app.directive('incrementer', function() {
return {
scope: {
page: '=',
alertPage: '&'
},
template: '<button ng-click="incrementPage()">increment page</button>',
link: function(scope, elem, attrs) {
scope.incrementPage = function() {
scope.page += 1;
scope.alertPage();
}
}
}
})
html模板：
<body ng-app='app' ng-controller='myCtrl'>
page is {{page}}
<incrementer page='page' alert-page='alertPage()'></incrementer>
</body>
问题答案：
它之所以不能立即显示更新的值，是因为2方式绑定仅在摘要周期内才更新父（或指令的使用者范围）范围的绑定值。摘要循环在触发ng-
click之后发生。因此$scope.page，控制器中尚未更新。您可以通过多种方式解决此问题，方法是使用timeout，它将延迟操作在摘要周期结束时运行。您也可以通过设置一个将值保存为2向绑定属性的对象来实现。由于2向绑定属性和父范围共享同一对象引用，因此您将立即看到更改。
方法1-使用超时：
scope.incrementPage = function() {
scope.page += 1;
$timeout(scope.alertPage)
}
方法2-绑定对象：
//In your controller
$scope.page2 = {value:1};
//In your directive
scope.incrementPage = function() {
scope.page.value += 1;
scope.alertPage();
}
方法3-使用带有参数的函数绑定传递值：
//In your controller
$scope.alertPage = function(val) {
alert(val);
}
和
<!--In the view-->
<div incrementer page="page" alert-page="alertPage(page)"></div>
和
//In the directive
scope.incrementPage = function() {
scope.page += 1;
scope.alertPage({page:scope.page});
}
app = angular.module('app', []);
app.controller('myCtrl', function($scope) {
$scope.page = 1;
$scope.page2 = {value:1};
$scope.alertPage = function() {
alert($scope.page);
}
$scope.alertPage2 = function() {
alert($scope.page2.value);
}
})
app.directive('incrementer', function($timeout) {
return {
scope: {
page: '=',
alertPage: '&',
page2:"=",
alertPage2: '&'
},
template: '<button ng-click="incrementPage()">increment page</button>',
link: function(scope, elem, attrs) {
scope.incrementPage = function() {
scope.page += 1;
scope.page2.value += 1;
$timeout(function(){ scope.alertPage() });
scope.alertPage2();
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div incrementer page="page" alert-page="alertPage()" page2="page2" alert-page2="alertPage2()"></div>
</div>
-
问题内容： 也许我对指令控制器的工作原理有一个基本的误解，据我了解，它们被用作暴露给其他指令和控制器的一种API。我正在尝试使控制器和链接功能进行内部通信。 例如，我希望能够通过控制器函数设置一个变量，然后在链接函数中使用它： 如何在链接功能中访问myVar或sayHi？还是我完全错过了重点？ 问题答案： 控制器的$ scope（在控制器中定义，而不在函数中定义）和链接都相同。可以从链接中使用在控
-
问题内容： 我有一个ng- view以外的NavbarCtrl。我有一个与服务对话以使用户登录的登录控制器。用户登录后，我希望导航栏更新为用户的电子邮件地址。但是，对我而言，一旦用户登录，我似乎无法让Navbar范围更新加载到我的“ Auth”服务中的数据。 这是我的主要index.html： 而我的服务： 还有我的Login和Navbar控制器： 从我的研究中，我会认为$ scope.user
-
问题内容： 我可能会考虑将其完全倒退，但是我正在尝试制作三个嵌套指令，让它们称为：屏幕，组件和小部件。我希望窗口小部件能够触发组件中的某些行为，从而触发屏幕中的某些行为。所以： 我可以使用来在小部件的链接fn中要求父组件，但是如何进一步使组件控制器访问其包含的屏幕呢？ 我需要的是WHAT in组件，因此，当您单击小部件的按钮时，它会发出“ screeny！”警报。 谢谢。 问题答案： 您可以通过以
-
嗨，我用spring初始化器创建了一个简单的Spring Boot应用程序。我在主应用程序类的同一文件夹中添加了一个控制器。 这是给我以下错误的网址http://localhost:8080/welcome 此应用程序没有针对/错误的显式映射，因此您将其视为回退。 Sat Dec 19 12:51:44 IST 2020出现意外错误（类型=未找到，状态=404）。 如果我使用@restContro
-
我正在尝试使用< code>Auth::user()- 我已经检查并包含了所需的文件，我正在从用户表中获取用户 我在调用变量并将其发布到控制器函数中的DB时遇到问题。任何帮助都可以。 将User表中的User发布到Tokens表的中，以便我可以使用模型 出现此错误: SQLSTATE[23000]：完整性约束冲突：19非空约束失败：令牌。user_id（SQL:插入“令牌”（“token1”、“t
-
问题内容： 我正在尝试使用AngularJS创建我的第一个应用程序。但是，如果我需要针对特定情况使用指令，我会感到困惑。 我有一个简单的“地图”页面，需要在其中显示所选区域的纬度/经度值。目前，我根本没有使用指令。我在控制器中执行所有操作，并使用局部显示结果。我不打算在其他任何地方重用我的地图视图。这就是为什么我不觉得我需要指令。 另一方面，我读到某个地方，每次您尝试在控制器中操作DOM（我正