Question

我似乎无法选择使用Angular指令！我有两个选择，都在指令内。我想第一个选择确定第二个选择的可用选项。

Here's a fiddle:

http://jsfiddle.net/jordannpotter/hfyUa/

从“辅助选择”
从“主要选择”
请注意，“辅助选择”变为空白 !!

当然，如果您注释掉指令代码（第3-9行），它就能完美运行。

这里发生了什么，我该如何解决？

Answer 1

所以你发生的事情是指令的范围是将你从控制器的范围中分离出来，你需要在主要和次要变量之前添加一个对象级别。

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

app.directive('awesomeDirective', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div class="awesome" ng-transclude></div>'
    }
});

AwesomeController = function ($scope, $timeout) {
    $scope.options = {};
    updateAllowedSecondaryOptions = function () {
        if ($scope.options.primary == 'primaryOption1') {
            $scope.secondaryOptions = [
                {value: 'foo', title: 'Foo'}, 
                {value: 'bar', title: 'Bar'},
                {value: 'baz', title: 'Baz'}]
        } else if ($scope.options.primary == 'primaryOption2') {
            $scope.secondaryOptions = [ 
                {value: 'bar', title: 'Bar'},
                {value: 'baz', title: 'Baz'}]
        }

        $scope.options.secondary = $scope.secondaryOptions[0]
    }

    $scope.options.primary = 'primaryOption2'
    updateAllowedSecondaryOptions()

    $scope.primarySelected = function (newValue) {
        $scope.options.primary = newValue;
        updateAllowedSecondaryOptions()
    }
};

http://jsfiddle.net/G5PLL/

您可以通过阅读https://github.com/angular/angular.js/wiki/Understanding-Scopes来了解更多有关正在发生的事情的信息，该信息涉及将您从原型继承中分离出来的情况。

P.S。 Misko的规则“每当你拥有ng-model时，那里必须有一个点。如果你没有一个点，那你做错了。“

Angular指令不适用于选择

1 个答案: