有一個使用AngularJS指令的動態html元素WHITOUT $ scope？

我想使用This Plunker示例代碼來使用AngularJS將一些元素動態添加到HTML頁面。（你應該在新鏈接中運行它，而不是編輯器環境）這是我第一次聲明AngularJS指令（除了簡單測試）的經驗。我有兩個關於此示例的問題：

我的方法是在我的控制器中使用Controller as而不是$Scope。（我不知道這個方法的名字！）那麼我應該如何處理上面的示例代碼呢？因爲它使用$compile(...)($scope)。應該應用哪些更改？
指令中的範圍與控制器相關嗎？那麼，如果我在這種情況下可以忽略控制器的範圍，我是否應該對指令進行任何更改？

2016-05-18 Elnaz

1）當使用contrller作爲語法時，$compile(...)($scope)更改爲$compile(...)(vm)。也爲所有的函數和變量，而不是$範圍內使用vm或this

var vm = this;

所以不是$scope.list使用vm.list和功能也可以使用。

$scope.do = function() .. 

    vm.do = function() ....

2）在指令像添加controllerAs這個

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

，如果你想引用外部控制器使用該

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

在視圖改變像這樣：

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

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

編輯： works demo

來源

2016-05-18 06:09:06

非常感謝。但是我有一些問題：正如你所看到的，在指令中有一個控制器已經注入了$ scope，我應該怎麼做？是$ scope與Controller的$ scope有關嗎？您是否在指令定義EmployeeCtrl中省略了指令自己的控制器和myController？ – Elnaz

看到我更新的答案。 –

看到這個示例可能會幫助你http://stackoverflow.com/questions/37096954/ng-model-wont-update-the-changed-form-content/37097044#37097044 –

回答您的第一個點：

內部控制器，你必須創建一個變量，將代表「控制器」;

var vm = this;
現在它被綁定到$範圍的所有屬性現在將VM
的部分在HTML：<div ng-controller="customCntrl as vm"
現在的觀點，而不是闖民宅範圍性能：與DIV結合控制器方式直接，你將收到像這樣的前綴VM：vm.name
在指令：方式與「控制器」綁定控制器：

app.directive（「customDir」， function（）{ return { controller：'customCntrl'， controllerAs：'vm'， ...
```
  } 
     }); 
```

回答你的第二點：

您仍然可以申請廣播併發出了這樣的 '虛擬機'：

$範圍$腕錶（'VM。名稱'，函數（）{ $ scope。$ broadcast（'topic-123'，'msg'）; }）;

並捕獲它： $ scope。$ on（'topic-123'，function（event，msg）{}）;

來源

2016-05-18 06:33:53

有一個使用AngularJS指令的動態html元素WHITOUT $ scope？

回答

相關問題