AngularJS Directive WHITOUT $ scopeを使用して動的HTML要素を作成しますか？

Question

AngularJSを使用してHTMLページにいくつかの要素を動的に追加するには、This Plunkerサンプルコードを使用します。 （これはエディタ環境ではなく、新しいリンクで実行してください。）これはAngularJS指令を宣言した最初の経験です（単純なテストを除いて）。

1. 私のアプローチは、私のコントローラでController asの代わり$Scopeを使用している：私はこのサンプルについて2つの質問があります。 （私はこのアプローチの名前はわかりません！）だから、上記のサンプルコードで何をすべきですか？ $compile(...)($scope)を使用しているためです。どのような変更を適用する必要がありますか？
2. 指令のスコープはコントローラに関連していますか？したがって、この場合コントローラからスコープを省略することができますが、指示に変更を適用する必要がありますか？

Answer 1

1）$compile(...)($scope)の場合、コントラクタを構文として使用する場合、$compile(...)(vm)に変更してください。そしてまた、すべての機能、代わりに$スコープの変数にvmまたはthis

var vm = this; 

ので、代わりに$scope.list使用vm.listを使用し、機能のためにも使用します。あなたはこれまでのようなビューの変更に外部コントローラの使用この

app.directive('myDirective', function() { 
    return { 
    restrict: 'A', 
    controller: 'EmployeeController', 
    controllerAs: 'ctrl', 
    template: '' 
    }; 
}); 

を参照したい場合はディレクティブで

$scope.do = function() .. 

    vm.do = function() .... 

2）は、この

app.directive('myDirective', function() { 
    return { 
    scope: {}, 
    controller: function() { 
    this.name = 'Elnaz' 
    }, 
    controllerAs: 'ctrl', 
    template: '<div>{{ctrl.name}}</div>' 
    }; 
}); 

に似controllerAsを追加して：

を

<div ng-controller="myController as ctrl"> 
    {{ctrl.name}} 

    <button type="button" ng-click="ctrl.do()">Do</button> 
    </div> 

編集：あなたの第一ポイントの works demo

Answer 2

回答：あなたのコントローラ内部

1. 、あなたは「コントローラとして」を表すだろう一つの変数を作成する必要があります。

   var vm = this;

2. 今$の範囲にバインドされたすべてのプロパティは現在、HTMLではVM

3. の一部になります。代わりに、スコープのプロパティを参照のうえの観点から、今<div ng-controller="customCntrl as vm"
4. ：DIVとコントローラーをバインドする 方法直接、あなたはこのようにその前にVMの接頭辞する必要があります：vm.name

5. ディレクティブでは：「としてコントローラ」を持つコントローラをバインドする ウェイ：

   app.directive（「customDir」を、 function（）{ return { コントローラ： 'customCntrl'、 controllerAs： 'vm'、 ...あなたの第二のポイントに

     } 
        }); 
   

回答：

1. あなたはまだ放送を適用し、このような 'VM' の上に放出することができます。

   $スコープ$ VM '（見ます。 { $ scope。$ broadcast（ 'topic-123'、 'msg'）; }）;

   これをキャプチャするには、 $ scope。$ on（ 'topic-123'、function（event、msg）{}）;