如何建立链接到角度自举警报

Question

我的应用程序有一个多行警报，其中每行代表一个独特条件的信息。某些行需要包含滚动到页面相应部分的链接。

下面的例子显示的按钮（锚不工作要么）警报消息中。当你点击按钮时，它应该通过AlertMessage_Click显示一个JavaScript警报。

HTML：

<div> 
    <div ng-controller="MyCtrl" class="alert alert-warning" id="AlertTest" ng-show="ShowAlertMessage()"> 
    </div> 
</div> 

控制器：

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 

    $scope.AlertMessage_Click = function() { 
    alert('test'); 
    } 

    $scope.ShowAlertMessage = function() { 
    var alertMessage = ""; 
    //alertMessage = "<a id='TestLink' href='#' ng-click='AlertMessage_Click($event)'>Click Here...</a>";  
    alertMessage = "<button id='TestLink' ng-click='AlertMessage_Click()'>Click Here...</button>"; 

    var AlertTest = document.getElementById('AlertTest'); 
    AlertTest.innerHTML = alertMessage; 
    return (alertMessage != ""); 
    } 

} 

JSFiddle

为什么不AlertMessage_Click火？

Answer 1

第一：你是不是在想angularjs（不操作DOM控制器内使用指令代替！）。

第二：你的ng-click事件没有被触发，因为它不是编译 by angularjs。 尝试改变这一行：

AlertTest.innerHTML = alertMessage;

在这一个：

AlertTest.innerHTML = $compile(alertMessage)($scope); 

这样一来，你会最终有一个正确，编译并希望工作的HTML。

P.S. 不要忘记，包括$您关联编译：

function MyCtrl($scope, $compile) { 

Answer 2

我把Luxor001的建议，而不是试图使它在控制器内的工作，我创建了自己的控制器自定义指令。

控制器填充项的阵列和定制的指令采用这些值，并且增加了警报元件。在适当的位置绑定click事件并显示单击元素的ID。

var myApp = angular.module('myApp', []); 

myApp.directive('customAlert', function() { 

    var AlertController = ['$scope', function ($scope) { 

     //setup condition variables. These will be populated 
     //from a web api 
     $scope.Condition1 = true; 
     $scope.Condition2 = false; 
     $scope.Condition3 = true; 

     //create array of our messages 
     $scope.AlertMessages = []; 

     //process conditional variables and add new array elements if appropriate 
     if ($scope.Condition1) { 
      $scope.AlertMessages.push({ 
       Message: 'Condition 1 is true', 
       ID: 'Condition1', 
       IsLink: true 
      }); 
     } 


     if ($scope.Condition2) { 
      $scope.AlertMessages.push({ 
       Message: 'Condition 2 is true', 
       ID: 'Condition2', 
       IsLink: true 
      }); 
     } 

     if ($scope.Condition3) { 
      $scope.AlertMessages.push({ 
       Message: 'Condition 3 is true', 
       ID: 'Condition3', 
       IsLink: false 
      }); 
     } 

    }]; 


    return { 
     //set controller property to our AlertController custom controller 
     controller: AlertController, 
     link: function ($scope, element, attrs) { 

      //loop through our alert messages 
      for (i = 0; i < $scope.AlertMessages.length; i++) { 

       var NewElement = ''; 

       //if we are processing anything but the first item, add a line break 
       if (i != 0) 
       { NewElement = NewElement + "<br>"; } 

       //add the new element. If this is supposed to be a link item it 
       //should add an anchor and set the click event. 
       if ($scope.AlertMessages[i].IsLink) { 
        NewElement = NewElement + "<a id='" 
         + $scope.AlertMessages[i].ID 
         + "'>" 
         + $scope.AlertMessages[i].Message 
         + "</a>"; 
       } 
        //otherwise add as a static label 
       else { 
        NewElement = NewElement + "<label id='" 
         + $scope.AlertMessages[i].ID 
         + "'>" 
         + $scope.AlertMessages[i].Message 
         + "</label>"; 
       } 

       NewElement = angular.element(NewElement); 

       //click will show the element id. this will 
       //eventually be used to navigate to other sections of the page 
       //based on what was clicked. Only assigned if setup as a link. 
       if ($scope.AlertMessages[i].IsLink) { 
        NewElement.on('click', 
        function (Item) { 
         alert(Item.target.id); 

        }); 
       } 
       //append the new element to our alert div 
       element.append(NewElement); 

      } 

     } 
    }; 
}); 

这里是更新的JSFiddle。