Question

myDirective是一个自定义指令，具有独立的范围。我正在尝试在其模板和控制器之间进行数据绑定以获取ng-hide值。任何人都可以告诉我为什么以下代码不起作用？我也尝试过：

ng-hide="{{hidden}}"
scope: { hidden: "=" }

我设法通过scope.$apply('hidden=false');在链接功能中完成它但听起来像是一个黑客，我宁愿保留指令控制器中的所有逻辑。

编辑：此问题已在@Shuhei Kagawa回答后更新。

var myApp = angular.module('myApp', []);

myApp.directive('myDirective', function () {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude ng-hide="hidden"></div>',
        scope: true,
        controller: function ($scope) {
            $scope.hidden = false;

            this.hide = function () {
                console.log("hide function called");
                $scope.hidden = true;
            }
        }
    }
});

myApp.directive('myButton', function () {
    return {
        restrict: 'E',
        require: '^myDirective',
        replace: true,
        transclude: true,
        template: '<button type="button" ng-transclude></button>',
        link: function (scope, element, attrs, myDirectiveCtrl) {
            element.bind('click', function () {
                myDirectiveCtrl.hide();
            });

        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <my-directive>
        <my-button>Hide me!</my-button>
    </my-directive>
</div>

Answer 1

ng-hide需要一个布尔值。因此，请使用true / false代替'true' / 'false'。

$scope.hidden = false;
// and
$scope.hidden = true;

此外，如果您不使用my-directive的隐藏属性，则不需要scope: { hidden: "@" }。只需使用scope: true创建新范围。

修改

当您直接处理DOM事件而不是使用ng-click时，您需要致电scope.$apply()以启动$digest cycle。如果不这样做，Angular不会注意到$scope已更改。

element.bind('click', function () { scope.$apply(function() { myDirectiveCtrl.hide(); }); });

以下是jsFiddle。

指令中模板和控制器之间的数据绑定

1 个答案: