Question

我已经看到了几种不同的方法来编写角度指令和控制器，只是想知道哪种是最佳实践，或者哪些是基本相同的。从下面的例子我想知道每个的好处或它们是否相同。如果它们与两者的优点相同。

//Declare my module app
var app = angular.module('myapp', []);



    app.controller('Controller', ['$scope', function($scope) {
        $scope.customer = {
          name: 'blaa',
          address: 'bla blaaablaa'
        };
      }])
      .directive('myDirective', function() {
        return {
          templateUrl: 'temp.html'
        };
      });

好的，所以第一个区别在于上面的Controller。以下是我看过它们的两种方式。

app.controller('Controller', ['$scope', function($scope) {

});

或

app.controller('Controller', function($scope){
});

第一个使用数组传入$ scope以及带范围的函数。第二个只传递一个带$ scope的函数。为什么不同？为什么2 $范围或它们是相同的范围。

现在我看到了第二个不同的指示。

  app.directive('myDirective', function() {
            return {
              templateUrl: 'temp.html'
            };
          });

或

app.directive('myDirective', function () {
    return function (scope, element, attrs) {
    };
})

那么除了一个之外还有什么区别会返回一个带有范围，元素，attrs的函数？

现在是最后一个问题。

app.directive('myDirective', function () {
        return function (scope, element, attrs) {
            scope.$watch(attrs.color, function(value) {

            });
        };
    });

以上是使用$ watch方法，没有角度已经通过绑定做到这一点。例如，我不能以同样的方式使用以下方式或＆＃39; =＆＃39;用于双向绑定。请解释一下我的区别。

  return {
    scope: {
    color: '@'
    }

希望我以有帮助的方式突破这3个问题，让大家互操作并建设性地回答我。

Answer 1

第一个问题

正如aet所指出的，将依赖项作为字符串传递的数组表示法对于缩小很有用。因为您的缩小工具将转换任何变量名称，但不会更改任何字符串。你可以通过编写类似的东西来测试它：

['$scope', function(thisShouldBeStillAScope) {

而angular会将该变量解析为$ scope。

第二个问题

在指令中，您可以指定许多元素，每个元素都有特定用途。如果您只想包含没有任何行为的模板，那么第一个就可以了。如果您需要执行更改属性等操作，则需要通过链接功能进行操作。特别是在指令中，你可以通过不同的方式实现完全相同的事情，由你来找到最简单的方法。

第三个问题 $ watch指定每次指令变量值变化时触发的函数。当您想要观看尚未被控制器绑定的$ scope变量时，您会发现它很有用。

希望它有所帮助。

编写相同指令和控制器的方法很多？

1 个答案: