[英]AngularJS: Communication between directives and view updation
我是AngularJS的新手。 我搜索了很多信息,找到了一些适合我的不错的解决方案( 指令之间的AngularJS通信 )。 第一条指令中的代码如下所示:
angular.module('app')
.directive('myItem', function () {
return {
templateUrl: 'views/item.html',
restrict: 'C',
controller: function ($scope, $element) {
$element.closest('.models-slider').on('afterChange', function(event, slick, currentSlide){
$scope.$emit('model:updated', currentSlide);
});
}
})
第二:
angular.module('app')
.directive('model', function () {
return {
templateUrl: 'views/model.html',
restrict: 'E',
controller: function ($scope, $element) {
$scope.$on('model:updated', function(e, data){
$scope.item = data;
console.log('scope', $scope); // Here I see right value of item
});
});
}
});
但是问题出在view / model.html内部:
<div class="left-block">
<a class="back" href="#"></a>
<div class="model-wrapper">
<div class="front-view active">
<img src="images/model.png"/>
<img ng-if="item.frontImage" ng-src="{{ item.frontImage }}"/>
</div>
<a class="rotate"></a>
</div>
</div>
它不会更新。 我的代码中有任何错误吗? 如何更新我的看法?
因为afterChange
是一个非角度事件,所以在myItem
指令中在scope.$apply
中发出' model:updated
'
不过,您的问题不太清楚,我将尝试为您提供一些答案或提示:
首先, $scope.$on
不适用于您在不同范围之间传递数据。 以及为什么要对myItem
指令使用C的限制? 您如何使用my-item
和model
这两个指令? 您认为它们在哪里?
您可以在指令和控制器(或另一个指令的控制器)之间建立双向绑定 。 您需要在指令myItem
创建一个隔离的范围:
angular.module('app')
.directive('myItem', function () {
return {
templateUrl: 'views/item.html',
restrict: 'AEC',
scope: {
item: '=' //bi-directional binding
},
controller: function ($scope, $element) {
$element.closest('.models-slider').on('afterChange', function(event, slick, currentSlide){
// $scope.$emit('model:updated', currentSlide);
$scope.item = currentSlide;
});
}
})
在model
的指令模板中,您可以获得项目
<my-item item="item"></my-item>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.