Question

我熟悉使用controllerAs，但不明白为什么在使用隔离范围时，我的控制器属性都没有显示在范围内。

这是plunker显示我正在谈论的内容。

当我在控制器函数中专门设置属性时，为什么vm.min和vm.max都是空白的？

如果我删除隔离范围，{{vm.min}}正常工作。但是，对于孤立的范围，它没有。

1） this.min已设置在controller内，因此{{vm.min}}应该有一个值，对吗？
2）在元素上设置了属性max，因此当我使用bindToController和隔离范围时，{{max}}应该有一个值，对吗？

Answer 1

由于您已在my-example directive中使用了vm.min和vm.max，因此它不适合您。

检查此代码一次，

var myApp = angular.module('myApp', []);

function myExample() {
  var directive = {
    restrict: 'EA',
    scope: {
      max: '='
    },
    controller: ExampleController,
    controllerAs: 'vm',
    bindToController: true, // because the scope is isolated,
    templateUrl: `tpl.html`
  };
  return directive;
}

ExampleController.$inject = ['$scope'];

function ExampleController($scope) {
  // Injecting $scope just for comparison
  var vm = this;
  vm.min = 3;
}

angular
  .module('myApp')
  .directive('myExample', myExample);

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  </head>
  <body>
    <h1>Why are vm.min and vm.max both blank?</h1>
    <my-example max="5">
      
    </my-example>
    <script src="script.js"></script>
    
    <script type="text/ng-template" id="tpl.html">
    <div>
        vm.min: {{vm.min}}
        <br/>
        vm.max: {{vm.max}}
      </div>
  </script>

  </body>
</html>

如果要使用指令内的模板，则应使用transclude选项。

Answer 2

您需要template或templateUrl属性，其中需要呈现这些值。

控制器是否适用于隔离范围？

2 个答案: