如何在父控制器中訪問指令的對象？

Question

我有一個被表格替換的指令。 該表格綁定到vm.customer對象。

假設此指令將在應用程序的多個部分中使用，並且每個vm.customer對象都應具有自己的作用域，那么父控制器可以通過哪些方式訪問其vm.customer對象？

//指令

(function() {

'use strict';

angular
    .module('rugapp')
    .directive('customer', customer);

    function customer() {
        return {
          scope: {
          },
          restrict: 'E',
          templateUrl: 'rugapp/directives/customer-directive.html',
          replace: true,
          controller: 'CustomerController',
          controllerAs: 'vm'
        };
    }

})();

//查看

<div class="scrollable">
  <div class="scrollable-content section">
    <customer></customer>
  </div>
</div>

//父控制器

(function() {

'use strict';

angular
    .module('rugapp')
    .controller('CreateScheduleController', CreateScheduleController);

    function CreateScheduleController() {

        var vm = this;

        activate();

        function activate() {

        }

    }

})();

Answer 1

在指令與其父控制器之間進行通信的正確方法是使用指令的屬性。

在偽指令中，可以如下定義雙向綁定屬性：

(function() {

'use strict';

angular
    .module('rugapp')
    .directive('customer', customer);

    function customer() {
        return {
          scope: {
              person: '='
          },
          restrict: 'E',
          templateUrl: 'rugapp/directives/customer-directive.html',
          replace: true,
          controller: 'CustomerController',
          controllerAs: 'vm',
          bindToController: true // Bind the person property to the vm controller instead of the scope
        };
    }

})();

然后，在您的視圖中，按以下方式傳遞客戶對象：

<div class="scrollable">
  <div class="scrollable-content section">
    <customer person='vm.person'></customer>
  </div>
</div>

最后，您可以在父控制器中訪問此變量：

(function() {

'use strict';

angular
    .module('rugapp')
    .controller('CreateScheduleController', CreateScheduleController);

    function CreateScheduleController($scope) {

        var vm = this;

        activate();

        function activate() {
            console.log($scope.vm.person) // Do somethings with the person
        }

    }

})();

Answer 2

您還可以具有一個回調函數，告訴可重用指令在處理完成后立即調用。

單擊指令模板上的保存按鈕時，將調用父控制器的updateUser(user)函數。

index.htl

<script src="app.js"></script>
<script src="userDirective.js"></script>
....
    <body ng-controller="MainCtrl">
      <p>Hello {{name}}!</p>
      <user-form update-user="updateUser(user)"></user-form>

app.js

angular.module('plunker', []).controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.users = [{name: "Tars", gender: "male", email: "Tars@gmail.com"}];

  $scope.updateUser = function(user){
    $scope.users.push(user);
  }
});

user-directive.html

<div>
  <form novalidate class="css-form">
    Name: <input type="text" ng-model="user.name" required /><br />
    E-mail: <input type="email" ng-model="user.email" required /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <input type="button" ng-click="reset()" value="Reset" />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>
</div>

userDirective.js

(function() {

  'use strict';

  function UserController($scope) {
    $scope.master = {};

    $scope.reset = function() {
      $scope.user = angular.copy($scope.master);
    };

    $scope.update = function(user) {
      $scope.updateUser({
        user: angular.copy(user)
      });
    }

    $scope.reset();
  }

  angular
    .module('plunker')
    .directive('userForm', User);

  function User() {
    return {
      scope: {
        updateUser: '&'
      },
      restrict: 'E',
      templateUrl: 'user-directive.html',
      replace: true,
      controller: UserController
    };
  }
})();

要了解有關父控制器和可重用的隔離作用域指令通信選項的更多信息，請參閱https://stackoverflow.com/a/27997711/288952

如何在父控制器中訪問指令的對象？

問題描述

2 個解決方案

解決方案1
1 已采納 2015-01-20 15:41:56

解決方案2
0 2015-01-20 18:08:51

如何在父控制器中訪問指令的對象？

問題描述

2 個解決方案

解決方案1 1 已采納 2015-01-20 15:41:56

解決方案2 0 2015-01-20 18:08:51

解決方案1
1 已采納 2015-01-20 15:41:56

解決方案2
0 2015-01-20 18:08:51