有一个动态的 html 元素使用 AngularJS 指令 WHITOUT $scope？

Question

我想使用 This Plunker 示例代码通过 AngularJS 将一些元素动态添加到 HTML 页面。（你应该运行它在一个新的link，而不是在编辑器环境）这是我第一次声明AngularJS指令（除了简单的测试）。我有两个关于这个样本的问题：

我的方法是在我的控制器中使用 Controller as 而不是 $Scope。（我不知道这种方法的名称！）那么我应该如何处理上面的示例代码呢？因为它使用 $compile(...)($scope)。应该应用哪些更改？
指令中的范围是否与控制器相关？所以，如果我可以在这种情况下从控制器中省略范围，我是否应该对指令应用任何更改？

Answer 1

1) 当使用contrller作为语法时，$compile(...)($scope)改为$compile(...)(vm)。并且对于所有函数和变量而不是 $scope 使用 vm 或 this

var vm = this;

所以使用 vm.list 而不是 $scope.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

Answer 2

第 1 点的答案：

在您的控制器中，您将创建一个代表 "controller as";
的变量
var vm = this;
现在绑定到 $scope 的所有属性现在都将成为 vm 的一部分
在HTML中：使用 div 绑定控制器的方法：<div ng-controller="customCntrl as vm"
现在在视图中而不是直接引用作用域属性，你必须像这样在 vm 之前加上前缀：vm.name
指令中：使用 "controller as" 绑定控制器的方法：

app.directive('customDir', 函数() { return{ 控制器：'customCntrl'，控制器为：'vm'， ...
```
            }
        }); 
```

第二点的答案：

您仍然可以像这样在 'vm' 上应用广播和发射：

$scope.$watch('vm.name', 函数() { $scope.$broadcast('topic-123', 'msg'); });

并捕捉它： $scope.$on('topic-123', function(event, msg) {});

有一个动态的 html 元素使用 AngularJS 指令 WHITOUT $scope？

Have a dynamic html element using AngularJS Directive WHITOUT $scope?

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-controlleras