Question

我想在指令中显示带有ng-show的div标签。这不起作用。调用myFunctions中的所有方法，但是function1中的布尔值不会改变。

myApp.controller('MyController', ['$scope', function ($scope) {
    $scope.showDiv = false;
}]);

指令：

myApp.directive('travelInformation', function () {
    return {
        restrict: 'A',
        scope: {
            showDiv: '=showDiv',
            myFunction: '=',
        },
        link: function (scope, element, attrs) {

            this[scope.myFunction](element);

            this.function1 = function (element) {
                scope.showDiv = true; 
                console.log(scope.showDiv); //still false
            };

            this.function2 = function (element) {
                //do something else
            };
        }
    }
});

HTML：

<div travel-information show-div="showDiv" data-my-function="'function1'">
   Function1: here the showDiv should be changed
</div>

<div travel-information show-div="showDiv" data-my-function="'function2'">
    Function2
</div>

<div ng-show="showDiv">
    I am visible
</div>

怎么可能???

如果我删除带有data-my-function =＆＃34;＆＃39; function2＆＃39;＆＃34;的第二个div-tag，那么它就可以了。

Answer 1

那不行。您正在尝试在创建方法之前调用方法。

如果在变量初始化之后移动函数调用（或创建实际函数），它应该可以工作

this.function1 = function (element) {
    scope.showDiv = true; 
    console.log(scope.showDiv);
};

this.function2 = function (element) {
    //do something else
};

// move this to end
this[scope.myFunction](element);

- 或 -

this.function1 = function1;
this.function2 = function2;
this[scope.myFunction](element);

function function1(element) {
    scope.showDiv = true; 
    console.log(scope.showDiv);
};

function function2(element) {
    //do something else
};

Answer 2

隔离范围无法访问$ parent范围，因为它们没有父范围，只能访问 $ root 。

在指令中调用父范围

2 个答案: