角材料指令を変更してコンパイルする方法

ネイティブhtml要素をコンパイルするとうまく動作します。角材料指令を変更してコンパイルする方法

コンパイルすると、コンソールの角型要素（md-button）が「エラー：[ngTransclude：orphan]」と表示されます。

私は完全に疲れており、理解できません。テンプレートから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

角材料指令を変更してコンパイルする方法

答えて

関連する問題