Question

我正在阅读Digging into Angular's "Controller as" syntax文章。它显示在下面使用＆＃34; Controller as＆＃34;指令中的语法。

app.directive('myDirective', function () {
  return {
    restrict: 'EA',
    replace: true,
    scope: true,
    template: [].join(''),
    controllerAs: '', // woohoo, nice and easy!
    controller: function () {}, // we'll instantiate this controller "as" the above name
    link: function () {}
  };
});

这里我必须设置控制器名称controller属性。现在，如果我想定义我想在多个控制器中使用的通用指令，我该怎么做呢？

修改1：

我发布了有关我想要实现的内容的代码。在视图中，有一个文件的输入标签，当选择文件时，我想要它的名称和内容类型。我将使用输入标签的更改事件。我不知道如何将文件对象传递给我的虚拟机。我想使用该指令使用change事件来获取有关多个控制器中文件的信息。

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="/myCtrl.js"></script>
</head>

<body ng-controller="MyController as vm">
    <input name="file" type="file" file />
    <input type="button" ng-click="vm.upload(vm.file);" value="Upload" />
</body>
</html>

myCtrl.js

var app = angular.module('myApp', []);

app.controller('MyController', MyController);

MyController.$inject = ['$http'];

function MyController($http) {
    var vm = this;

    vm.file = null;
    vm.upload = function(file) {
      $http.post('/upload', { filename: file.name, contentType: file.type })
        .success(function(resp) {
            console.log(resp);
        })
        .error(function(resp) {
            console.log(resp);
        });
    }
}

app.directive('file', function() {
  return {
    restrict: 'AE',
    scope: true,
    controllerAs: 'vm',
    link: function(scope, el, attrs){
      el.bind('change', function(event){
        var files = event.target.files;
        var file = files[0];

        // What to write here to pass file object into vm ?

        // Below line is for that controller design which uses $scope service. But I am using controllerAs syntax
        // scope.file = file;
        // scope.$apply();
      });
    }
  };
});

Answer 1

关于它的非常好的文章请阅读http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

Answer 2

如果要与单指令定义共享多个控制器，则在没有控制器的情况下定义指令（可选）。

IMP ：使用scope: true定义指令或将其保留为default scope但不定义isolated scope。这将允许指令继承父控制器中定义的方法和属性。

将指令放在模板中的ng-controller指令中。

控制器1：

<div ng-controller='ctrl1">

  <my-directive></my-directive>
<div>

控制器2：

<div ng-controller='ctrl2">

  <my-directive></my-directive>
<div>

顺便说一下。

EDIT1：

在控制器（MyController）中：您可以使用$broadcast

vm.upload = function(fileObj){

    $rootScope.$broadcast('sending-file-object',{data:fileObj})
}

将使用$on，

在所有其他控制器中接收

$scope.$on('sending-file-object',function(event,data){
  console.log(data) // here you get data;
})

如何在controllerAs语法中定义通用指令？

2 个答案: