Question

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

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

Answer 1

1）当使用控制器作为语法时，$compile(...)($scope)更改为$compile(...)(vm)。并且对于所有函数和变量而不是$ scope使用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

Answer 2

回答第一点：

在您的控制器中，您将创建一个表示＆＃34;控制器为＆＃34 ;;
的变量
var vm = this;
现在绑定到$ scope的所有属性现在都是vm的一部分
在HTML中：用div绑定控制器的方法：<div ng-controller="customCntrl as vm"
现在在视图中而不是直接引用范围属性，您必须在此之前使用vm作为前缀：vm.name
在指令中：将控制器与＆＃34;控制器绑定为＆＃34;：
的方法
app.directive（＆＃39; customDir＆＃39;，function（）{ 返回{ 控制器：＆＃39; customCntrl＆＃39;，控制器：＆＃39; vm＆＃39;， ...
```
            }
        }); 
```

回答你的第二点：

您仍然可以应用广播并发出＆＃39; vm＆＃39;像这样：

$ scope。$ watch（＆＃39; vm.name＆＃39;，function（）{ $ scope。$ broadcast（＆＃39; topic-123＆＃39;，＆＃39; msg＆＃39;）; }）;

并抓住它： $ scope。$ on（＆＃39; topic-123＆＃39;，function（event，msg）{}）;

使用AngularJS Directive WHITOUT $ scope有一个动态html元素吗？

2 个答案: