在angularjs指令中不觸發運行時控件的事件

使用AngularJS創建指令。該指令顯示一個運行時（動態）控件，但不觸發來自控制器的事件。誰能幫我。在angularjs指令中不觸發運行時控件的事件

注意：在指令中也使用了compile。

下面給出了plnkr鏈接。

module.controller('controllerOne', ['$scope', function ($scope) { 


    $scope.AddClickButton = function() { 
     alert("Button Clicked"); 
    }; 


}]); 

module.directive('directiveOne', ['$compile', function ($compile) { 
    return { 
     restrict: 'E', 

     scope: { 

      data: '=' 
     }, 

     link: function ($scope, $element, $attrs) { 

      var btnhtml = '<button type="button" ng-click="AddClickButton()">Click Me</button>'; 
      var temp = $compile(btnhtml)($scope); 

      $element.append(temp); 

     } 
    }; 
}]);

HTML

<form name="form1" > 

    <directive-one data="dataOne"></directive-one> 

</form>

Plunkr

來源

2016-03-22 Chow

非常感謝您 – Chow

你應該傳遞AddClickButton方法參考使用&（表達結合）作爲指令已經使用分離的範圍，以指令。所以它不直接關於父範圍。

標記

<form name="form1" > 

<directive-one data="dataOne" click-action="AddClickButton()"></directive-one>

然後調用使用clickAction isoalted範圍丙從指令該方法。

指令

module.directive('directiveOne', ['$compile', function($compile) { 
    return { 
    restrict: 'E', 

    scope: { 
     data: '=', 
     clickAction: '&' 
    }, 
    link: function($scope, $element, $attrs) { 
     var btnhtml = '<button type="button" ng-click="clickAction()">Click Me</button>'; 
     var temp = $compile(btnhtml)($scope); 
     $element.append(temp); 
    } 
    }; 
}]);

Forked Plunkr

來源

2016-03-22 21:23:59

非常感謝你。 – Chow

@Chow確實接受了答案。謝謝:) –

此外我有一個問題。我使用ng-click事件動態生成html標籤。所以我需要提及目錄中的所有操作名稱。我的想法是有目錄作爲一個普通的obj和控制器有很多方法，所以當我生成HTML內容時，只需要提及方法/函數名稱。有沒有辦法實現？例如： - 我有3個按鈕和3個按鈕單擊事件調用不同的方法，所以我需要提及範圍內的所有三個按鈕的動作名稱？ – Chow

您可以使用此版本http://plnkr.co/edit/9QCpAQUhOKZ3NtU1rfhY

link: function ($scope, $element, $attrs) { 
     $scope.AddClickButton = function() { 
     alert($scope.text); 
     } 
    }

，並從控制器中刪除功能

來源

2016-03-22 21:25:43

在angularjs指令中不觸發運行時控件的事件

回答

相關問題