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 个答案: