Question

在我的指令中，我正在实例化一个对象。

我想将此对象传递给与指令关联的控制器的范围。我该怎么做？

请注意，这是一个孤立的代码，供您了解问题。在实际问题中，它无助于在控制器内实例化该对象。

我知道指令中的范围对象用于传递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

你可以有两个解决方案

解决方案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 ;
          }
        };
    }]);

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

带有$ controller的解决方案2的工作示例

  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>

Answer 2

您可以在方向的链接功能中执行此操作。由于您要在范围上设置值，因此可以使用链接功能的scope参数。您还可以在控制器上设置对象，因为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;
        }

    };
}]);

现在假设您不想通过使用＆＃34;范围＆＃34;来隔离您的范围。成员返回你的指令。从你的例子中我不认为你真的想要一个孤立的范围。（无论如何，链接功能也适用于那里。）

AngularJS：将对象从指令传递给控制器

2 个答案: