隔離範圍：值不更新

我想用我自己的自定義控件來擴展bootstrap ui庫。此控件將用於AngularJS應用程序。目前，我陷入了範圍界限。隔離範圍：值不更新

這plunker是一個更復雜的控制的簡化版本。我試圖強調的概念是範圍界定。您會注意到自定義控件my-query預填充了myController.$scope.query的值。您還將看到查詢放在自定義控件下的頁面中。在我鍵入時，該值不會更新。爲什麼？我的代碼如下所示：

myApp.directive('myQuery', [function() { 
    return { 
     restrict:'E', 
     transclude: true, 
     scope: { 
      query: '=' 
     }, 
     template: '<div ng-controller="myQueryController"><input type="text" ng-model="query" /><button ng-click="go_Click()">go</button></div>' 
    }; 
}]); 

myApp.controller('myQueryController', ['$scope', function($scope) { 
    $scope.go_Click = function() { 
     $scope.$emit("goClicked"); 
    }; 
}]);

我在做什麼錯？

來源

2014-09-11 user3284007

要小心將原語傳遞給嵌套作用域中的ng模型，應該總是在ng模型中有一個點 – charlietfl 2014-09-11 13:47:28

在您的指令模板中，您正在添加一個額外的控制器，該控制器將添加到另一個範圍中。這是導致問題的原因。而不是這樣做，將控制器邏輯移入控制器函數或在您的指令中定義的鏈接函數，都可以工作。

試試這個。這是一個使用控制器功能的例子。請注意，我將原始myQueryController移入了指令中，並從myQuery指令的模板中刪除了ng-controller指令。

'use strict'; 
var myApp = angular.module('myApp', []); 

myApp.controller('myController', ['$scope', function($scope) { 
    $scope.queryValue = 'test'; 

    $scope.$on('goClicked', function() { 
    $scope.performAction(); 
    }); 

    $scope.performAction = function() { 
     alert('Using ' + $scope.queryValue); 
    }; 
}]); 

myApp.directive('myQuery', [function() { 
    return { 
     restrict:'E', 
     transclude: true, 
     scope: { 
     query: '=' 
    }, 
    template: '<div><input type="text" ng-model="query" /><button ng-click="go_Click()">go</button></div>', 
    controller : function ($scope) { 
     $scope.go_Click = function() { 
      $scope.$emit("goClicked"); 
     }; 
    } 
    }; 
}]);

來源

2014-09-11 13:41:44 sma

非常有趣。我想我還有很多要了解AngularJS中的範圍。 – user3284007 2014-09-11 13:47:34

https://egghead.io/technologies/angularjs。令人難以置信的視頻學習Angular。 – sma 2014-09-11 13:48:42