AngularJS: передать объект из директивы в контроллер

Question

В моей директиве я создаю экземпляр объекта.

Я хотел бы передать этот объект в область действия контроллера, который я ассоциирую с директивой. Как я могу это сделать?

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

Я знаю, что объект scope в директиве предназначен для передачи значений, указанных в HTML, я написал его таким образом, чтобы помочь вам понять, что я пытаюсь сделать.

angular.module('test', [])

.controller('test', ['$scope', function($scope) {
    alert($scope.obj); //Needs to contain {value: 'bla'}

}])

.directive('pTest', ['$compile', function($compile) {
    var object = {value: 'bla'};

    return {
        scope: {
            obj: object //how can I do that?
        },
        controller: 'test'
    };
}]);

Answer 1

Вы можете сделать это в функции ссылки направления. Поскольку вы хотите установить значение в области, вы можете использовать параметр области функции связи. Вы также можете установить объект на контроллере, поскольку четвертый аргумент (необязательный) аргумент функции link - это контроллер для директивы.

.directive('pTest', ['$compile', function($compile) {
    var object = {value: 'bla'};

    return {
        controller: 'test',
        link: function(scope, elements, attrs, controller) {
           scope.obj = object;
           // or
           controller.obj = object;
        }

    };
}]);

Теперь предположим, что вы не хотите изолировать вашу область видимости, используя член "scope" в ответе на вашу директиву. Из вашего примера я не думаю, что вы на самом деле хотите изолированную область. (Независимо от того, функция связи будет работать там тоже.)

Answer 2

Вы можете иметь два решения

Решение 1: используйте '=' в изолированной области видимости, это связывает локальное / директивное свойство области видимости с родительским свойством области видимости.

 .directive('ptest', ['$compile', function($compile) {
        var object = {value: 'changed value'};

        return {

          scope: {
                iobj:"="
            },
          template : "<div>{{iobj.value}}<div>",

             link: function(scope,elem,attr){
             scope.iobj=object ;
          }
        };
    }]);

в HTML

 <div ng-controller="testCtrl">
  <div ptest iobj="object"></div>
</div>

Решение 2: используйте службу $controller и сделайте testCtrl в качестве родительского и скопируйте всю его область в область контроллеров

.directive('ptest', ['$compile', function($compile,$controller) {
                var object = {value: 'changed value'};

                return {


                     controller:function($scope,$controller){

                    $controller('testCtrl', {$scope: $scope});
                       console.log($scope.object.value);
                       $scope.object = object;
                     }
                };
            }]);

рабочий пример для решения "=" 1:

angular.module('test',[])
.controller('testCtrl',function($scope){


  $scope.object = {value:'intial value'};



})



.directive('ptest', ['$compile', function($compile) {
        var object = {value: 'changed value'};

        return {
          //replace:true,
          scope: {
                iobj:"="
            },
          template : "<div>{{iobj.value}}<div>",
            
             link: function(scope,elem,attr){
             scope.iobj=object ;
          }
        };
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test"  ng-controller="testCtrl">
  {{object.value}}
   <div ptest iobj="object"></div>
</div>

Рабочий пример для решения 2 с $controller

  angular.module('test',[])
    .controller('testCtrl',function($scope){


      $scope.object = {value:'intial value'};



    })



    .directive('ptest', ['$compile', function($compile,$controller) {
            var object = {value: 'changed value'};

            return {
              
                
                 controller:function($scope,$controller){
                 
                $controller('testCtrl', {$scope: $scope});
                   console.log($scope.object.value);
                   $scope.object = object;
                 }
            };
        }]);

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="test"  ng-controller="testCtrl">
      {{object.value}}
       <div ptest ></div>
    </div>