1

无法使用 anuglar js 更新下拉列表更改的指令。这是我的应用程序代码

html代码

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="opt" ng-options="font.title for font in fonts" ng-change="change(opt)">
    </select>
    <p>
        {{opt}}</p>
    <br />
    <h3>
        Text Is
    </h3>
    <div id="tstDiv" testdir ct="ct">
    </div>
</div>

控制器和指令代码

angular.module("myApp", []).controller("MyCtrl", function ($scope) {
        $scope.fonts = [
    { title: "Arial", text: 'Url for Arial' },
    { title: "Helvetica", text: 'Url for Helvetica' }
];
        $scope.opt = $scope.fonts[0];
        $scope.change = function (option) {
            $scope.opt = option;
        }
    })
        .directive("testDir", function ($timeout) {
            return {
                restrict: 'A',
                scope: {
                    ct: '=ct'
                },
                link: function ($scope, $elm, $attr) {
                    document.getElementById('tstDiv').innerHTML = $scope.selectedTitle;
                }
            };
        });

这是小提琴http://jsfiddle.net/Cbqju/

4

2 回答 2

0

看起来您需要 $watch 以查看该变量的更改您的链接函数应该类似于

scope: {
    ct: '=ct',
    opt: '=opt'
},
link: function ($scope, $elm, $attr) {
    $scope.$watch('opt', function(newOpt, oldOpt) {
        document.getElementById('tstDiv').innerHTML = newOpt.title;
    });
}
于 2013-07-05T06:43:06.263 回答
0

根据@Ajaybeniwal 的评论，这里是工作的plunker

于 2013-07-05T08:00:43.407 回答