单击更新子指令

Question

有没有办法在点击时更新子指令？在我的 plnkr 中，第 1 列包含一个名称列表。如果您单击名称，它会将信息填充到第 2 列的联系指令中。如果我在第 2 列的文本框中进行更改，第 3 列的信息指令中的数据也会更改。这是我的plnkr：

http://plnkr.co/edit/gcZbd9letYhA4ViBQJ0Q?p=preview

这是我的 JS：

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

app.controller('contactController', function() {

  this.contacts = [
      {
        id: 1,
        name: 'Bob'
      },
      {
        id: 2,
        name: 'Sally'
      },
      {
        id: 3,
        name: 'Joe'
      }
    ]

    this.selectedContact;

    this.PublishData = function(data) {
      this.selectedContact = data;
    }

    this.UpdateData = function(data) {
      for (var i = 0; i < this.contacts.length; i++) {
        if (this.contacts[i].id === data.id) {
          this.contacts[i] = angular.copy(data);
        }
      }
    }
});

app.directive('contactDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'contact.html',
      scope: {
        myModel: '=',
        updateData: '&'
      },
      link: function (scope, element, attrs) {

          scope.$watch('myModel', function (newValue, oldValue) {

            scope.contact = angular.copy(newValue);
          });
      }
    }
});

app.directive('infoDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'info.html',
      scope: {
        contactObject: '='
      },
      link: function (scope, element, attrs) {

      }
    }
});

Answer 1

您可以简单地使用 $broadcast 和 $on 服务

使用 $broadcat 创建事件并传递参数用 $on 你听那个事件并取那个值

我以这种方式编辑了您的代码：

        <!--Contact template-->
        <div class="col-sm-6">
          <b>Column 2</b>
          <input type="text" ng-model="newName" />
          <button ng-click="updateData({data:contact,newName:newName})">Update</button>
        </div>
        <div class="col-sm-6">
          <b>Column 3</b>
          <info-directive contact-object="contact"></info-directive>
        </div>

        <!-- Your Index file -->
      <body ng-app="myApp">
        <div ng-controller="contactController as $ctrl">
          <div class="row col-md-12">
            <div class="col-sm-2">
              <b>Column 1</b>
              <div ng-repeat="contact in $ctrl.contacts">
                <a href="" ng-bind="contact.name" ng-click="$ctrl.PublishData(contact)"></a>
              </div>
            </div>
            <div class="col-sm-6">
              <contact-directive my-model="$ctrl.selectedContact" update-data="$ctrl.UpdateData(data,newName)"></contact-directive>
            </div>
          </div>
        </div>
      </body>

    //and your controller
         var app = angular.module('myApp', []);

app.controller('contactController', function() {

  this.contacts = [
      {
        id: 1,
        name: 'Bob'
      },
      {
        id: 2,
        name: 'Sally'
      },
      {
        id: 3,
        name: 'Joe'
      }
    ]

    this.selectedContact;

    this.PublishData = function(data) {
      this.selectedContact = data;
    }

    this.UpdateData = function(data,newName) {
      for (var i = 0; i < this.contacts.length; i++) {
        if (this.contacts[i].id === data.id) {
          this.contacts[i].name = newName;
        }
      }
    }
});


app.directive('contactDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'contact.html',
      scope: {
        myModel: '=',
        updateData: '&'
      },
      link: function (scope, element, attrs) {

          scope.$watch('myModel', function (newValue, oldValue) {
            scope.newName = newValue.name;
            scope.contact = angular.copy(newValue);
          });
      }
    }
});

app.directive('infoDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'info.html',
      scope: {
        contactObject: '='
      },
      link: function (scope, element, attrs) {

      }
    }
});

单击更新子指令

Update child directive on click

angularjs

angularjs-directive