Question

我想知道如何在AngularJS的指令中使用控制器的范围变量。

我有这个HTML / JS代码：

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <div style="height: 30em; width: 50em">
        <ul style="float: left; width: 30%;">
            <li><button ng-click="showSomething(thing1)">Thing1</button></li>
            <li><button ng-click="showSomething(thing2)">Thing2</button></li>
        </ul>
        <div style="float: left; width: 70%;">
            <div style="height:25em; width:37em;border:1px solid #ccc; overflow: auto;"">
                <import-things>
                </import-things>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    console.log("webapp");
    var app = angular.module('myApp');

    app.controller('appCtrl', function($scope) {
        $scope.name = "Name";       
    });

    app.controller('myCtrl',  function($scope) {
        $scope.thing = 'thing1'
        $scope.showSomething = function(newThing) {
            $scope.thing = newThing;
        }
    });

    app.directive('importThings', function() {
        return {
            restrict: 'E',
            templateUrl: '/webapp/{{ thing }}.html'
        };
    });
</script>

</body>
</html>

我想要的是{{thing}}会根据我点击的按钮而改变。

非常感谢！

更改指令的templateUrl，取决于范围变量

0 个答案: