2016-11-29 2 views
-3

私はangularjs.Aで作業しています。問題は、コンパイル関数の後に指示文でコントローラを書き、コンパイル関数による出力がピクチャに表示されることです。すなわち「最初のコンパイル」コントローラからの出力は表示されていません。エラーが表示され、エラーが表示された画像に表示されます。これで私を助けてください。 がコントローラをカスタムディレクティブで動作させるには?

var app = angular.module("myapp", []); 
 
app.controller('ctrl', ['$scope', function ($scope) { 
 
    
 
    $scope.emp = [{ name: "Day", age: "25", salary: "30000", place: "sydney", color: "#FF5733" }, 
 
     { name: "Dickinson", age: "34", salary: "6000", place: "disney", color: "#FAB304" }, 
 
     { name: "Domeyko", age: "27", salary: "9000", place: "newyork", color: "#0ED1B3" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#896BBB" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#387037" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#F3AE1B" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FAB304" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E7B" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#0EC8D1" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#FFC300 " }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#D10E5B" }, 
 
     { name: "Echols", age: "25", salary: "15000", place: "sweden", color: "#13D0E1" }]; 
 
}]); 
 
app.directive('showDetails', function ($interpolate) { 
 
    return { 
 
     //templateUrl: 'showDetails.html' 
 
     compile: function (tElement, tAttributes) { 
 
      console.log(tAttributes.text + "-in compile"); 
 
     }, 
 
     controller: function ($scope, $element, $attri) { 
 
      var v = $interpolate($attri.text)($scope); 
 
      //console.log($attri.text + "-in controller"); 
 
      console.log(v + "-in controller"); 
 
     } 
 
    } 
 
     
 
});
<script src="../Scripts/angular.min.js"></script> 
 
    <link href="../Content/bootstrap.css" rel="stylesheet" /> 
 
    <script src="../Scripts/bootstrap.min.js"></script> 
 

 
    <script src="../js/app.js"></script> 
 
    <script src="../js/ChildCtrl.js"></script> 
 
    
 
    <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> 
 

 
    
 
</head> 
 

 
<body style="background-image: url('../images/uRzTkNW.jpg');" ng-controller="ctrl"> 
 
    
 
    <div ng-repeat="emps in emp" class="col-md-3"> 
 
     <div show-details text="first"> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

+0

あなたの投稿に関連コードを含めてください。あなたが言及した '写真'は投稿にも含まれていませんが、あなたのコードの写真があなたを助けるのにほとんど役に立たない場合。 – Duncan

+0

こんにちは、画像をアップロードしようとしていますが、画像を追加する代わりにリンクとして作成しました。[1]:https://i.stack.imgur.com/nfBP9.png [1]:https:/ /i.stack.imgur.com/nBNIK.png。エラーが表示されている場所に1枚の画像が出力されます。次の画像は指示コードです。 – padmakar

+0

と私が書いたように、質問にあなたのコードを投稿しない限り、そのイメージは役に立たない。また、エラーメッセージに含まれているURLをクリックしようとしたこともあります(画像だけなのでできません)。通常、角度エラーメッセージのこれらのリンクは非常に有益な情報を提供します。 – Duncan

答えて

0

コードを送信していますあなたの問題は、この行です:

controller: function ($scope, $element, $attri) { 

あなたは、それはおそらく、このすべてを説明しますが、エラーメッセージで表示されたリンクをクリックするとあなたのコントローラに$attriというサービスを注入しようとしていますが、その名前のサービスはありません:おそらく$attrsが必要です。 $scope,$element,$attrs,$transcludeはすべて、他の角度サービスと同様にコントローラに注入することができる。

+0

私はyoutube broのチュートリアル(techcbtのangularjsのカスタムディレクティブ)に見ました。彼は結果を得た。私は自分の問題点を理解できません。 – padmakar

+0

私は私の答え、ショートバージョンを修正しました:あなたは '$ attrs'のスペルを間違って入力しました – Duncan

+0

私はこれまでに認識していませんでした。 – padmakar

関連する問題