Question

我正在尝试学习隔离范围，bindToController和controllerAs是如何工作的。

如果我使用隔离范围和模板制作指令，它将按预期工作：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        function directiveTest() {
            function CtrlTest() {
                this.foo = "honk";
                this.clearFoo = function() {
                    this.foo='';
                };
            }
            return {
                restrict : 'E',
                scope: {
                    label : '@',
                    lg : '@'
                },
                bindToController : true,
                controller: CtrlTest,
                controllerAs: 'ctrlTest',
                template: '<label>\n    {{ ctrlTest.label }}\n    <input type="text" ng-model="ctrlTest.foo"/>\n</label>\n<button ng-click="ctrlTest.clearFoo()">Clear</button>\n\n<div>{{ ctrlTest.foo }}</div>\n\n<div ng-show="ctrlTest.foo.length> ctrlTest.lg">\n    Long string !\n</div>\n'
            };
        }
        var app = angular.module('app',[]);
        app.directive('dirTest',[directiveTest]);
    </script>
</head>
<body>
    <dir-test label="Type something now:" lg="7">
    </dir-test>
</body>
</html>

我试图在没有模板的情况下做同样的事情，但我不能让它发挥作用：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
        function directiveTest() {
            function CtrlTest() {
                this.foo = "honk";
                this.clearFoo = function() {
                    this.foo='';
                };
            }
            return {
                restrict : 'E',
                scope: {
                },
                bindToController : true,
                controller: CtrlTest,
                controllerAs: 'ctrlTest'
            };
        }
        var app = angular.module('app',[]);
        app.directive('dirTest',[directiveTest]);
    </script>
</head>
<body>
    <dir-test>
        <label>
            Type something again :
            <input type="text" ng-model="ctrlTest.foo"/>
        </label>
        <button ng-click="ctrlTest.clearFoo()">Clear</button>

        <div>{{ ctrlTest.foo }}</div>

        <div ng-show="ctrlTest.foo.length>7">
            Long string !
        </div>
    </dir-test>
</body>
</html>

但是，如果我将范围设置为true而不是隔离范围，则可行。

有人可以向我解释如何使第二个例子有效，或者如果不可能，为什么？

Answer 1

翻转bindToController和scope周围的值。

{
    ....
    scope: true,
    bindToController: {}
    ...
}

我刚刚在周末遇到了同样的问题，并在这里做了一个简单的完整示例：bindToController Not Working? Here’s the right way to use it! (Angular 1.4+)

在没有模板的情况下使用bindToController

1 个答案: