Javascript 如何访问指令'；父控制器中的对象？_Javascript_Angularjs_Angularjs Directive_Angularjs Scope

Javascript 如何访问指令'；父控制器中的对象？

javascript angularjs

Javascript 如何访问指令'；父控制器中的对象？,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我有一个指令，它被一个表单所代替。该表单绑定到vm.customer对象假设此指令将在应用程序的多个部分中使用，并且每个vm.customer对象都应该有自己的作用域，那么父控制器可以通过哪些方式访问其vm.customer对象 //指示 (function() { 'use strict'; angular .module('rugapp') .directive('customer', customer); function customer() {

我有一个指令，它被一个表单所代替。该表单绑定到

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')
    .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>

然后，在您的视图中，传递一个customer对象，如下所示：

(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>

您还可以有一个回调函数，告诉可重用指令在处理完成后调用

在这里，当我们单击指令模板上的保存按钮时，将调用父控制器的

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>

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>

要了解有关父控制器和可重用的隔离作用域指令通信选项的更多信息，请参阅

如果我错了，请更正我，但似乎父控制器正在此处设置person对象。我要寻找的是将person对象从指令中获取到父控制器中。这仍然有效吗？是的，它仍然有效，因为它是双向绑定的。因此，您可以在父级或指令中更改

$scope.person

。值将在它们之间同步。您可以在“隔离指令的范围”一节中阅读更多关于此的内容。非常好，谢谢。当指令使用controllerAs语法时，是否需要执行任何特殊操作？例如，我没有使用

person='{name:…

而是使用

person='{vm.customer.name:''，vm.customer.address:''，…}

这似乎不符合预期。您是否使用Angular 1.3.x？如果是，您可以使用option，这是指令选项之一。请查看我编辑的答案。感谢您的帮助。我已使其正常工作。请注意，我们应该记录$scope.vm.person，而不是$scope.person才能使其正常工作。

<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>

(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
    };
  }
})();