Как получить доступ к объекту директивы в родительском контроллере?

У меня есть директива, которая заменяется формой. Эта форма привязана к объекту 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() { 

     } 

    } 

})();

источник

2015-01-20 Raphael Rafatpanah

Правильный способ общения между директивой и его родительский контроллер должен использовать атрибут директивы.

В директиве, вы можете определить атрибут связывания двухстороннюю следующим образом:

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

    } 

})();

источник

2015-01-20 15:41:56 lvarayut

Пожалуйста, поправьте меня, если я ошибаюсь, но мне кажется, как родительский контроллер устанавливает объект человека здесь. Я ищу, чтобы получить объект человека из директивы в родительский контроллер. Это все еще актуально? –

Да, это все еще актуально, потому что это двусторонняя привязка. Таким образом, вы можете изменить '$ scope.person' либо в родительском, либо в директиве. Значение будет синхронизироваться между ними. Подробнее об этом можно узнать в [Угловая директива] (https://docs.angularjs.org/guide/directive), раздел «Изоляция области действия директивы». – lvarayut

Отлично, спасибо. Есть ли что-то особенное, что нужно сделать, когда директива использует синтаксис controllerAs? Например, вместо 'person = '{name: ...' У меня есть 'person =' {vm.customer.name:" ", vm.customer.адрес: "", ... '} ', который, похоже, не работает должным образом. –

У вас также может быть обратная связь ction, ссылаясь на директиву многократного использования для вызова, как только это делается с обработкой.

здесь 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: "[email protected]"}]; 

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

Чтобы узнать больше о родительском контроллере и многоразовый изолированных варианты Scoped директивы связи см https://stackoverflow.com/a/27997711/288952

источник

2015-01-20 18:08:51

Как получить доступ к объекту директивы в родительском контроллере?

ответ

Смежные вопросы