angular.js - 传递对象从指令视图控制器

Question

*请注意：有一个Plunker链接： https://plnkr.co/edit/PAINmQUHSjgPTkXoYAxf?p=preview

起初我想传递一个对象作为指令点击事件参数， （对我来说太复杂了），所以我决定通过分别发送事件和对象来简化它。

在我的程序中，对象总是未定义在视图控制器中，视图本身与Plunker示例相反。

在Plunker示例中，它仅在第一个传递事件（第二个指令单击事件工作正常）上未在控制器上定义。

• 我不知道为什么我在简单的Plunker模拟和我的海量代码中得到2个不同的结果，我希望两种情况都是同一个逻辑问题的两种不同结果。
• 同样欢迎通过事件函数传递对象作为参数的解决方案。

HTML

<pick-er get-obj-d="getObj()" obj-d="obj"></pick-er> 

视图 - 控制器

function mainController($scope) 
{ 
    $scope.test = "work"; 
    $scope.getObj = function(){ 
     $scope.test = $scope.obj; 
    } 
} 

指令：

function PickerDirective() 
{ 
    return { 
     restrict: 'E', 
     scope: // isolated scope 
     { 
      obj : '=objD', 
      getObj: '&getObjD' 
     }, 
     controller: DirectiveController, 
     template:`<div ng-repeat="item in many"> 
         <button ng-click="sendObj()"> 
          Click on me to send Object {{item.num}} 
         </button> 
        </div>` 
    }; 


    function DirectiveController($scope, $element) 
    { 
     $scope.many =[{"num":1,}]; 
     $scope.sendObj = function() { 
      $scope.obj = {"a":1,"b":2, "c":3}; 
      $scope.getObj(); 
     } 
    } 
} 

Answer 1

我你的情况下，会更加简单易用的事件，看看这个Plunker：

https://plnkr.co/edit/bFYDfhTqaUo8xhzSz0qH?p=preview

主控制器

function mainController($scope) 
{ 
console.log("mainCTRL ran") 
$scope.test = "work"; 
    $scope.$on('newObj', function (event, obj) { 
    $scope.obj = obj; 
    $scope.test = obj; 
    }); 
} 

指令控制器

function DirectiveController($scope, $element) 
    { 
    $scope.many =[{"num":1,}] 
     $scope.sendObj = function() { 
      $scope.$emit('newObj', {"a":1,"b":2, "c":3}) 
     } 
    } 

    return { 
     restrict: 'E', 
     controller: DirectiveController, 
     template:'<div ng-repeat="item in many"><button ng-click="sendObj()">Click on me to send Object {{item.num}}</button></div>' 
    }