AngularJS動態自定義指令問題

我的自定義指令運行良好的onload頁面加載，但使用append添加時，它無法正常運行。它在運行時不顯示其內容。AngularJS動態自定義指令問題

HTML：

<!doctype html> 
<html lang="en" ng-app="module1"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Demo</title> 

    <link rel="stylesheet" href="css/bootstrap.css">  

    <script src="js/angular.js"></script> 
    <script src="js/ui-bootstrap-tpls-0.13.0.js"></script>  
    <script src="js/app.js"></script> 
</head> 
<body> 

<div id="divContainer" style="border-style: solid;border-color:red;" ng-controller = "Controller1 as cnt1" > 
    <button ng-click="clicked();">Click Me!!</button> 
    <wlaccordion></wlaccordion> 
</div>   

</body> 
</html>

app.js：

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

app.controller('Controller1', ['$scope', function($scope) { 

    $scope.authorData = authorInfo; 

    $scope.clicked = function() { 
     alert('Clicked'); 
     //angular.element(document.getElementById('divContainer')).append('<wlaccordion1></wlaccordion1>' (scope)); 
     angular.element(document.getElementById('divContainer')).append('<wlaccordion></wlaccordion>'); 
    } 

}]);//controller1  

var authorInfo = [ 
    { 
     'name': 'Ray', 
     'rate': '10', 
     'show': 'true'  
    }, 
    { 
     'name': 'Mahesh', 
     'rate': '12',   
     'show': 'true'  
    } 
] 

app.directive("wlaccordion", function($compile) { 

    var template = '<div ng-controller = "Controller1 as cnt1">' + 
         '<div ng-repeat="aData in authorData" ng-init="tab = 1">' +  
          '<ul>' + 
           '<li>' + 
            '<h1 ng-show={{aData.show}} ng-class="{active: tab === 1}"> {{aData.name}} </h1>' +     
            '<h1 ng-show={{aData.show}} ng-class="{active: tab === 2}"> {{aData.rate | currency}} </h1>' + 
           '</li>' + 
          '</ul>' + 
         '</div>' + 
        '</div>';    

    return{ 
     link: function(scope, element){ 
        var content = $compile(template)(scope); 
        element.append(content); 
     } 
    } 
});

我想指令的功能相同的onload。

-Thanks 馬赫什

來源

2015-05-29 Mahesh

使用'.append'是一個非常非有角度的事情要做。你應該使用'ng-if'來切換你的手風琴，而不是使用 – CodingIntrigue

@RGraham我將以JSON格式獲取新的數據，我需要重建視圖。現在我剛剛把靜態數據。 – Mahesh

爲什麼在'link'函數中編譯代碼而不是使用僞指令的模板屬性？ – user3707125

AngularJS用於表示邏輯和業務一個的分離。所以我認爲你應該以角度來做這件事，你現在的做法更多的是jQuery。

我建議你手風琴集合添加到控制器：

app.controller('Controller1', ['$scope', function($scope) { 
    $scope.accordions = [0]; // Replace 0 with some actual data 
    $scope.clicked = function() { 
     $scope.accordions.push($scope.accordions.length); // Same here 
    }; 
    // Your other code 
}

而在HTML中添加ng-repeat：

<div id="divContainer" style="border-style: solid;border-color:red;" ng-controller = "Controller1 as cnt1" > 
    <button ng-click="clicked();">Click Me!!</button> 
    <wlaccordion ng-repeat="accordion in accordions"></wlaccordion> 
</div>

編輯：另外不要忘記從wlaccordion刪除彙編「 s link。

編輯＃2：我想這authorInfo全局變量簡單地使用例如，但是如果它沒有再考慮的module.constant或module.value

來源

2015-05-29 14:02:19 user3707125

謝謝，我會重構我的代碼。我想知道的是爲什麼自定義指令不能正確顯示，即使$ compile沒有鏈接。 – Mahesh

因爲'link'函數從未執行 - angluar不知道你已經添加了該指令（因爲你已經通過jQuery）。你應該在父代碼中執行編譯：'angular.element（...）。append（$ compile（''）（$ scope））''。只是要明確：角度不知道你正在通過jQuery做的任何** DOM操作。 – user3707125

當我這樣做時，我得到異常：ReferenceError：$編譯未定義 – Mahesh

app.controller('Controller1', ['$scope','$compile', function($scope, $compile) { 

    $scope.authorData = authorInfo; 

    $scope.clicked = function() { 
     alert('Clicked'); 
     //angular.element(document.getElementById('divContainer')).append('<wlaccordion1></wlaccordion1>' (scope)); 
     angular.element(document.getElementById('divContainer')).append($compile('<wlaccordion></wlaccordion>')($scope)); 
    } 

}]);//controller1

來源

2016-10-02 17:57:51 Abdul

AngularJS動態自定義指令問題

回答

相關問題