Привязать часть строки к переменной угловой области

Я вытаскиваю данные JSON с сервера. Внутри объекта JSON я возвращаюсь, у меня есть строки, которые я хочу, чтобы иметь возможность использовать заполнители, чтобы динамически вставлять значения, введенные пользователем в пользовательском интерфейсе.Привязать часть строки к переменной угловой области

Я понимаю, что это компиляция $, но я не могу заставить ее работать. Я не уверен, что это возможно, или если я просто приближаюсь к нему неправильно.

Редактировать: Не знаю, хорошо ли я объясняю. Есть немного дальше, и я обновил Plunk и код ниже

упрощенный пример (view Plunk):

Вид:

<body ng-controller="MainCtrl"> 
    <input ng-model="name" type="text" /> 
    <p ng-bind-html="myval">{{myval}}</p> 
    <p>{{name}}</p> 
    </body>

Угловое приложение:

var app = angular.module('plunker', ['ngSanitize']); 

app.controller('MainCtrl', function($scope, $compile, dataSvc) { 
    init(); 

    function init() { 
    $scope.data = dataSvc.getData(); 
    $scope.name = ''; 
    } 

    $scope.$watch('name', function(newVal, oldVal) { 
    var c = $compile('<span>' + $scope.data.vals[0].text + '</span>')($scope); 
    console.log(c); 
    console.log(c[0]); 
    $scope.myval = c[0]; 
    }); 
}); 

app.service('dataSvc', function() { 
    this.getData = function() { 
    return { 
     vals: [ 
     { 
      text: "Hello {{name}}" 
     } 
     ] 
    } 
    }; 
});

Это почти работает с $ compile и con единственная регистрирует изменения так, как я хочу, чтобы они произошли, я просто не могу ее выводить на дисплей.

источник

2015-08-07 Chris Searles

Это чувствует, как проблема XY. Угловая на самом деле не имеет службы для выполнения такой интерполяции, потому что к тому времени, когда эта строка будет отображаться в браузере, цикл '$ digest' уже завершен. вы * можете * использовать директиву и вводить элемент вручную, но на самом деле, есть несколько причин, по которым вы будете хранить выражения на стороне клиента в своем исходном состоянии в базе данных в первую очередь. – Claies

@Claies Существует причина для этого, и компиляция $ работает, я просто что-то пропустил в ее использовании. См. Обновления выше. –

компиляция не работает; compile создает элемент, который необходимо добавить в коллекцию элементов на странице вручную. Помимо этого, я все еще утверждаю, что сервер не имеет никакого бизнеса при передаче кода на стороне клиента. – Claies

Я предлагаю вам использовать $interpolate службу при назначении переменной к другой, которая будет заботиться оценки фигурных скобок.

Код

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $interpolate) { 
    $scope.test = "Hello {{name}}!"; 
    $scope.name = 'World'; 

    init(); 
    function init() { 
    $scope.concat = $interpolate($scope.test)($scope); 
    } 
});

Working Plunkr

источник

2015-08-07 20:22:07

Спасибо! Именно то, что я искал. –

Если вы не используете ECMA6, скобки ({{}}) зарезервированы для интерполяции строк в HTML, а не в javascript.

Чтобы достичь того, чего вы хотите в JavaScript просто добавить переменную в строку:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.test = "Hello " + $scope.name + "!"; 

    init(); 
    function init() { 
    $scope.concat = $scope.test; 
    } 
});

Если вы хотите, чтобы JSON, чтобы обновить имя асинхронно или в любое время после компиляции, то используя переменную область в мнение именно то, что вы должны сделать:

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}!</p> 
</body>

, а затем в контроллере:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    function updateName(name) { // call this when the data is ready 
    $scope.name = name; 
    } 
});

источник

2015-08-07 18:59:14 Rorschach120

Как я уже сказал в своем вопросе, строки являются частью объекта JSON, который вытаскивается с сервера, поэтому это не работает. –

проверить мое редактирование. Вы можете присвоить этому значению JSON имя. Angular обновит область действия, и представление изменится, как только данные будут готовы, и вы вызываете эту функцию с помощью 'jsonObj.path.to.name' в качестве обратного вызова. – Rorschach120

Если вы разместите код для загрузки JSON, я смогу показать вас более конкретно. – Rorschach120

Почему бы вам не написать что-то вроде этого:

$scope.greetingText = "Hello"; 
$scope.greetingName = "World";

, а затем

$scope.completeGreeting = $scope.greetingText + $scope.greetingName + "!";

и теперь вид что-то вроде этого:

{{greetingText}} {{GREETINGNAME}}!

{{}} completeGreeting

источник

2015-08-07 19:01:13 binariedMe

Смотрите комментарий на @ Rorschach120. –

Почему бы вам не использовать регулярное выражение для поиска {{}} в строке и заменить вложенную часть строки на достоверные значения? – binariedMe

Скорее всего, метод конкатенации перегружающей строки будет полезен – binariedMe

Я отредактировал Plnkr, с полем ввода в сочетании с ngModel. Он выведет любую строку, введенную во входную модель. Насколько я понимаю, вы хотите выводить строки, введенные пользователем в пользовательском интерфейсе, так что это может сработать для вас.

<body ng-controller="MainCtrl"> 
    Name: <input ng-model="userInput" placeholder="Enter your input..."/><br> 
    <p>{{userInput || "User input will come here..."}}</p> 
    </body>

Plunker

источник

2015-08-07 19:21:30 ArBro

Нет, не так просто. См. Мое редактирование. –

Привязать часть строки к переменной угловой области

ответ

Смежные вопросы