2016-06-21 2 views
0

シンプルなカスタムディレクティブを作成しようとしていますが、常にエラーが表示されます。サンプルコードを以下のjsFiddleリンクに含めました。正確にどこが間違っているのか誰でも助けてくれますか?angularjsでカスタムディレクティブを実行できません

[https://jsfiddle.net/sridharspeaks/65vnj4dz/][1] 

おかげで、 シュリ​​ダール

+0

あなたがリンクは、私は – akazemis

+0

が壊れています。私はエディタでリンクを適切に設定できません。私はそれを試しています。人々は実際の質問を解決しようとするのではなく、問題を軽視するのが速すぎて幸せです。私はそれを適切なリンクにするために編集し続けます。 –

+0

はタマスありがとうそれを開くことができた –

答えて

1

これは固定plunkerです:

http://plnkr.co/edit/KTFFLc0QdmunQ4i8AT8o?p=preview

私は

  1. あなたのディレクティブとコントローラ名の場合に問題があると思います(私はすべて小文字にして、あまりにも多くの時間ソーあなたが唯一のコントローラの指令で指令に$スコープを挿入していない
  2. を使用するコントローラとの角度伝えるためにng-controller="mycontainercontroller"を使用しなかったY)

HTML:

<head> 
    <script src="http://code.angularjs.org/1.2.1/angular.js"></script> 
    <script src="script.js"></script> 
</head> 

<body> 

    <div ng-controller="mycontainercontroller"> 
    <mycontainer></mycontainer> 
    </div> 
</body> 

とJS:

angular.module('myApp', []). 
directive('mycontainer', function() { 
    return { 
    restrict: 'E', 
    scope: {}, 
    controller: 'mycontainercontroller', 
    template: '<div><input ng-model="container"></div><div>output : {{container}}</div>' 
    } 
}).controller('mycontainercontroller', ['$scope', function($scope) { 
    $scope.container = 123; 
}]) ; 
+0

Alainlb、ご協力いただきありがとうございます。私はhtmlのng-controllerはカスタムディレクティブが既に埋め込まれているので必須ではないと信じています。 –

1

2つの問題があります。一つはフィドルであり、スクリプトがそう次のように設定し、画面のロード前に実行する必要があります。

enter image description here

第二には、ディレクティブに$scopeを注入しないでください。 link関数内のディレクティブスコープにのみアクセスできます。

更新フィドル:https://jsfiddle.net/65vnj4dz/5/

+0

以下の回答から、私はplunkrで働いているかどうかを確認できましたが、私はjsFiddleで実行できません。これを示してくれてありがとう。 –

関連する問題