angular.js-將對象從指令傳遞到視圖控制器

Question

*請注意：有一個Plunker鏈接： https ://plnkr.co/edit/PAINmQUHSjgPTkXoYAxf ? p = preview

首先，我想將對象作為指令click事件的參數傳遞（這對我來說太復雜了），所以我決定通過分別發送事件和對象來簡化它。

在我的程序中，對象始終在視圖控制器中未定義，而視圖本身與Plunker示例相反。

在Plunker示例中，僅在第一個傳遞事件上才在控制器上對其進行定義（第二個指令click事件可以正常工作）。

• 我不知道為什么在簡單的Plunker模擬和大量代碼中會得到2個不同的結果，我希望這兩種情況都是同一邏輯問題的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>' 
    }