无法从指令angularjs绑定模式的作用域变量

Question

I am having trouble binding the scope variable of a modal in a directive used by the modal. I have tried all the solutions on the net. I have tried the $parent solution too, but nothing seems to work. I am new to Angularjs, so please help me out. Below is the code :

directive:

.directive('searchPart', function($timeout) {
        return {
            restrict: 'AEC',
            transclude:true,
            scope: {
                items: '=',
                prompt:'@',
                title: '@',
                subtitle:'@',
                model: '=',
                onSelect:'&'
            },
            link:function(scope,elem,attrs){
                scope.handleSelection=function(selectedItem){
                    scope.model=selectedItem;

                    scope.current=0;
                    scope.selected=true;
                    $timeout(function(){
                        scope.onSelect();
                    },200);
                };
                scope.current=0;
                scope.selected=true;
                scope.isCurrent=function(index){
                    return scope.current==index;
                };
                scope.setCurrent=function(index){
                    scope.current=index;
                };
            },
            templateUrl: 'admin/product/catalogView/partSearch.html'
        }
    })

modal controller:

.controller('ChildPartEditCtrl', function ($scope, $modalInstance, Data, $http) {
        $scope.name="";
        $scope.onItemSelected=function(){
            console.log('selected='+$scope.name);
        }}

html:

 <search-part items="items" prompt="Enter full part number" title="name" subtitle="abbreviation" model="name" on-select="onItemSelected()" />

Template

<input type="text" ng-model="model" placeholder="{{prompt}}" ng-keydown="selected=false" />
<br/>
<div class="items" ng-hide="!model.length || selected">
    <div class="item" 
      ng-repeat="item in items | filter:{partnumber:model}  track by $index" 
      ng-click="handleSelection(item.partnumber)" style="cursor:pointer" 
      ng-class="{active:isCurrent($index)}" 
      ng-mouseenter="setCurrent($index)">
        <p class="title">{{item.partnumber}}</p>
    </div>
</div>

Answer 1

The issue seems to be that you're assigning a primitive value to model. You should have an object in controller, for example:

$scope.selected = {name: ''}

then pass selected as the model:

<search-part items="items" prompt="Enter full part number" title="name" subtitle="abbreviation" model="selected" on-select="onItemSelected()" />

and set scope.model.name=selectedItem in the directive, that should work.

This works because objects are passed by value, with the objects reference (memory location) as value. So scope.model will point to the controller scopes selected object. scope.model.name=selectedItem will update it's name property.

Primitives are passed by it's actual value, in your original code, scope.model doesn't point to controllers scope at all.