如何更改角度材料指令並編譯它

但是，如果我編譯編譯角度材料元素（MD - 按鈕）在控制檯顯示「錯誤：[ngTransclude：孤兒]」。

我完全累了，不知道它。我需要從模板中獲取html代碼，我知道當我們從字符串值創建元素並編譯它時，它工作正常。也許它必須使用$ mdCompiler，但我不知道如何。

這是一個小而簡單的例子，請幫助我。

<!doctype html> 
 
<html lang="en" > 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
</head> 
 
<body ng-app="BlankApp" ng-cloak> 
 
\t <div ng-controller="myCtrl"> 
 
\t \t <mydir></mydir> 
 
\t </div> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-messages.min.js"></script> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script> 
 
    
 
    <script type="text/javascript"> 
 
\t console.log("\n\n\n\n\n"); 
 
\t console.clear(); 
 
\t 
 
    var app = angular.module('BlankApp', ['ngMaterial']); 
 
\t 
 
\t app.controller("myCtrl", function($scope) { }); 
 
\t 
 
\t app.directive('mydir', ['$compile', function($compile){ 
 
\t \t return { 
 
\t \t \t scope: { 
 
\t \t \t }, 
 
\t \t \t template: 
 
\t \t \t \t "<md-button>md Button</md-button>" + 
 
\t \t \t \t "<button>Native Button</button>" + 
 
\t \t \t \t "<span> HelpMePlease </span>", 
 
\t \t \t restrict: "E", 
 
\t \t \t link: function(scope, element, attrs) { 
 
\t \t \t \t scope.fn = function() { console.log("Hello"); }; 
 

 
\t \t \t \t var mdButton = element.find("button").eq(0); 
 
\t \t \t \t mdButton.attr("ng-click", "fn()"); 
 
\t \t \t \t $compile(mdButton)(scope); 
 
\t \t \t \t console.log(mdButton[0]); 
 

 
\t \t \t \t var button = element.find("button").eq(1); 
 
\t \t \t \t button.attr("ng-click", "fn()"); 
 
\t \t \t \t $compile(button)(scope); 
 
\t \t \t \t console.log(button[0]); 
 
\t \t \t } 
 
\t \t }; 
 
\t } ]); 
 
\t 
 
    </script> 
 
    
 
</body> 
 
</html>

來源

2017-02-24 Markiyan Dutsyak

這是因爲md-button已經編譯。

也許，你可以使用它。

jsfiddle上的示例。

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

 
app.controller("myCtrl", function($scope) {}); 
 

 
app.directive('mydir', ['$compile', '$mdCompiler', function($compile, $mdCompiler) { 
 
    return { 
 
    scope: {}, 
 
    template:"<button>Native Button</button>" + 
 
     "<span> HelpMePlease </span>", 
 
    restrict: "E", 
 
    link: function(scope, element, attrs) { 
 
     scope.fn = function() { 
 
     console.log("Hello"); 
 
     }; 
 

 
     $mdCompiler.compile({ 
 
     template: '<md-button ng-click ="fn()" >md Button</md-button>' 
 
     }).then(function(compileData) { 
 
     compileData.link(scope); 
 
     element.prepend(compileData.element); 
 
     }); 
 

 
     var button = element.find("button").eq(0); 
 
     button.attr("ng-click", "fn()"); 
 
     $compile(button)(scope); 
 
    } 
 
    }; 
 
}]);

<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css"> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
</head> 
 

 
<body ng-app="BlankApp" ng-cloak> 
 
    <div ng-controller="myCtrl"> 
 
    <mydir></mydir> 
 
    </div> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-messages.min.js"></script> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script> 
 

 
</body> 
 

 
</html>

來源

2017-02-24 17:18:40

如何更改角度材料指令並編譯它

回答

相關問題