Javascript AngularJS共享指令范围并迭代值_Javascript_Angularjs_Angularjs Directive

Javascript AngularJS共享指令范围并迭代值

javascript angularjs

Javascript AngularJS共享指令范围并迭代值,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我试图创建一个从子指令中获取值并填充视图中字段的指令。例如： app.directive('directive1',function() { return { restrict: "A", scope:{posts :'='}, link: function (scope, element, attrs) { scope.posts = {}; } }; }); app.directive(

我试图创建一个从子指令中获取值并填充视图中字段的指令。例如：

app.directive('directive1',function() {
    return {
        restrict: "A",
        scope:{posts :'='},
        link: function (scope, element, attrs) {
           scope.posts = {};
        }
    };
});


app.directive('directive2',function() {
    return {
        restrict: "A",
           link: function (scope, element, attrs) {

            element.bind('click', function(e) {
                  e.preventDefault();
                  scope.posts = {
                     '1' : {'title' : 'Cat in Hat'},
                     '2' : {'title' : 'Boat In Like'}
                  };
            });
        }
    };
})

HTML

是什么原因导致了这种情况，我应该如何着手解决它？

一种方法是使用directive2

require

directive1，这样它就可以与directive1控制器进行通信。这允许directive1拥有

帖子

，正如您在示例中所做的那样，同时允许directive2添加到帖子中，从而使我们能够很好地分离责任

所以我们要把它添加到directive2中

 require: "^directive1",

然后在directive1上，我们使用setter方法（

addPosts

）添加一个控制器，使用

extend

在新帖子出现时添加新帖子，然后将新合并的对象放在作用域上（使用$apply，因为我们通过单击事件触发它：

  controller: function($scope){
     var posts = {'0' : {'title' : "Oh the Places Youll Go"}};
     this.addPosts = function($scope,newPosts) { 
        angular.extend(posts,newPosts);
        $scope.$apply(function() {
           $scope.posts = posts;
       });

然后，我们可以通过将directive1的控制器作为参数添加到您的链接来访问它：

 link: function (scope, element, attrs, controller) {...}

最后从指令2调用

addPosts

：

  var newPosts = {
     '1' : {'title' : 'Cat in Hat'},
     '2' : {'title' : 'Boat In Like'}
  };
  controller.addPosts(scope,newPosts);

这是一个有效的方法：

一种方法是让directive2

要求

directive1，这样它可以与directive1控制器进行通信。这允许directive1拥有

帖子

，正如您在示例中所做的那样，同时允许directive2添加到其中，使我们能够很好地分离责任