angularjs无法更新下拉列表更改指令

Question

无法使用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/

Answer 1

按这里@Ajaybeniwal评论是工作plunker

Answer 2

看起来你会想以$观察该变量的变化你的链接功能应该是这个样子

scope: { 
    ct: '=ct', 
    opt: '=opt' 
}, 
link: function ($scope, $elm, $attr) { 
    $scope.$watch('opt', function(newOpt, oldOpt) { 
     document.getElementById('tstDiv').innerHTML = newOpt.title; 
    }); 
}