如何在指令中实现$ watch?

时间:2015-10-14 09:08:47

标签: html json angularjs angularjs-directive

我需要使用angularjs实现自动完成下拉列表。 下拉包含所有大学名称。这些名称我基于ajax调用并将这些值添加到$ scope.apply函数内的一个$ scope变量中。但是这个$ scope变量没有在指令内部更新。 当我搜索它显示我必须使用$ watch。我如何在指令

中实现$ watch

这是我的HTML代码

<html ng-app="myApp">
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" rel="stylesheet">
<link href="http://fiddle.jshell.net/css/normalize.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="https://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
    <div>
        <input auto-complete ui-items="university" ng-model="selected">
        selected = {{selected}}
    </div>
</div>

</body>
</html>

Angular js Code

var myApp = angular.module('myApp', [])
myApp.controller('HelloController', function ($scope) 
{

     $.ajax({
            type: 'GET',
            url: 'university.json',
            dataType: "json",
            success: function(response)
            {       
                $scope.$apply(function ()    
                {
                     angular.forEach(response, function(value, key) 
                     {
                         $scope.university.push(value.name);
                     });

                });                  
            },
            error: function(){} 
            });    
});  




myApp.directive('autoComplete', function($timeout) 
{
    return function(scope, iElement, iAttrs) {
            iElement.autocomplete({
                source: scope[iAttrs.uiItems],
                select: function() {
                    $timeout(function() {
                      iElement.trigger('input');
                    }, 0);
                }
            });
    };
});

示例json

[{"web_page": "http://www.gzu.ac.zw/", "country": "Zimbabwe", "domain": "gzu.ac.zw", "name": "Great Zimbabwe University"},
 {"web_page": "http://www.hit.ac.zw/", "country": "Zimbabwe", "domain": "hit.ac.zw", "name": "Harare Institute of Technology"},
 {"web_page": "http://www.lsu.ac.zw/", "country": "Zimbabwe", "domain": "lsu.ac.zw", "name": "Lupane State University"},
 {"web_page": "http://www.msu.ac.zw/", "country": "Zimbabwe", "domain": "msu.ac.zw", "name": "Midlands State University"},
 {"web_page": "http://www.nust.ac.zw/", "country": "Zimbabwe", "domain": "nust.ac.zw", "name": "National University of Science and Technology Bulawayo"},
 {"web_page": "http://www.rcu.ac.zw/", "country": "Zimbabwe", "domain": "rcu.ac.zw", "name": "Reformed Church University"},
 {"web_page": "http://www.solusi.ac.zw/", "country": "Zimbabwe", "domain": "solusi.ac.zw", "name": "Solusi University"},
 {"web_page": "http://www.uz.ac.zw/", "country": "Zimbabwe", "domain": "uz.ac.zw", "name": "University of Zimbabwe"},
 {"web_page": "http://www.wua.ac.zw/", "country": "Zimbabwe", "domain": "wua.ac.zw", "name": "Women's University in Africa"},
 {"web_page": "http://www.zegu.ac.zw/", "country": "Zimbabwe", "domain": "zegu.ac.zw", "name": "Zimbabwe Ezekiel Guti University"},
 {"web_page": "http://www.zou.ac.zw/", "country": "Zimbabwe", "domain": "zou.ac.zw", "name": "Zimbabwe Open University"}]

谢谢。

0 个答案:

没有答案