角不編譯correcty

我試圖讓我的身邊學習$編譯頭，但只是在尋找一對夫婦的指針，以我要去錯在何處？角不編譯correcty

var app = angular.module("App", []); 

app.controller("Ctrl", function ($scope, $http, $compile) { 

}).directive('myDir', function ($compile) { 

$(document).on("click", "#button", function ($compile) { 
var newDirective = angular.element('<li>{{app data}}</li>'); 
    $(".grid ul").append(newDirective); 
    $compile(newDirective)($scope); 
    }); 
    });

我想首先，沒什麼當我把它放到我的目錄中時似乎起作用，但是當我將它放入控制器時它就起作用了。其次，由於Angular標籤/元素無法正確顯示，因此似乎無法編譯。我只是想不通我要去哪裏錯了...

來源

2016-12-14 Whirlwind991

按照該文件$ compille

編譯HTML字符串或DOM成模板，併產生一個模板函數，則可以使用將範圍和模板鏈接在一起。

您正在使用它的正確軌道，只需在您的指令代碼中進行一些修改就可以了。

var app = angular.module("App", []); 
 

 
app.controller("Ctrl", function ($scope, $http, $compile) { 
 

 
}).directive('myDir', function ($compile) { 
 
    return{ 
 
     restrict: 'A', 
 
     scope: { 
 
      data:"=appdata" 
 
     }, 
 
     link: function(scope,element){ 
 
        var newDirective = angular.element('<li>'+ scope.data +'</li>'); 
 
        var content = $compile(newDirective)(scope); 
 
        element.append(content); 
 
     } 
 
    } 
 
    
 
});

<!DOCTYPE html> 
 
<html ng-app="App"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="Ctrl"> 
 
    <div class="grid" > 
 
     Hello 
 
     <ul my-dir appdata="'whatever'"> 
 
     
 
     </ul> 
 
    </div> 
 
    
 
    </body> 
 

 
</html>

Plunker：https://plnkr.co/edit/xqgnhXnVoYOsXFhPMbOY?p=preview

來源

2016-12-14 02:55:38 Deep

這是真棒謝謝！當我把這個例子放進去的時候，我不小心錯過了一些代碼，我編輯了這個代碼。最初我有一個按鈕點擊它將列表項目添加到UL ..（對不起，應該在提交之前正確地閱讀我的代碼）。是否有可能更新plunk以顯示如何合併？其他然後，它的作品完美 – Whirlwind991

當然，只需更新與HTML的問題，我會試一試 – Deep

通過假設您的HTML更新的重拳，希望它有幫助。 – Deep

您的指令沒有被格式化（創建）是正確的。不需要使用JQUERY ...你正在編譯html和數據（$ scope），但是你沒有將編譯好的模板應用到你的html。

入住此plunkr：https://plnkr.co/edit/eKdIEhyLBViWAOzfWhhV?p=preview

angular.module('plunker', []) 
    .directive('compileDir', ['$rootScope', '$compile', compileDir]) 
    .controller('HomeController', [HomeController]); 

    function compileDir($rootScope, $compile) { 

     var self = {}; 

     self.restrict = 'A'; 
     self.scope = { 
     compileDirOptions: '=' 
     }; 
     self.link = linkFn; 

     return self; 

     function linkFn($scope, $element, $attributes) { 

     // I am making a new scope because I do not want to mess the directive's one, you do not have to 
     var newScope = angular.merge($rootScope.$new(), $scope.compileDirOptions.data); 
     var el = $compile($scope.compileDirOptions.html)(newScope); 

     $element.append(el); 

     } 

    } 

    function HomeController() { 

     var self = this; 

     self.message = "Hello World!"; 

     self.data = { 
     html: '<li>{{name}}</li><li>{{color}}</li>', 
     data: { 
      name: 'app data', 
      color: 'red' 
     } 
    } 

}

你的HTML是這樣的：

<!DOCTYPE html> 
<html ng-app="plunker"> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-controller="HomeController as home"> 
    <ul compile-dir compile-dir-options="home.data"></ul> 
</body> 

</html>

來源

2016-12-14 04:05:01 btinoco

感謝您抽出時間回答，不幸的是我的投票結果會轉到其他答案，但這仍然是一種不同的方式，所以這很酷！ – Whirlwind991

角不編譯correcty

回答

相關問題